根据父 div 的尺寸定位图像叠加层答案

【问题标题】：Position image overlay based on the dimensions of parent div根据父 div 的尺寸定位图像叠加层
【发布时间】：2012-04-27 19:59:39
【问题描述】：

我有一个动画图像叠加层，我试图根据叠加层父 div 的高度来定位它。父 div 的尺寸是动态创建的。

我目前使用的代码：

jQuery('.parentdiv').hover(function(){
jQuery(".overlaydiv", this).stop().animate({"opacity": "0.95", top:'0px'},{queue:false,duration:500});
}, function() {
jQuery(".overlaydiv", this).stop().animate({"opacity": "0.95", top: '185px'},{queue:false,duration:500});
});

我想知道的是如何计算外部 div 的高度，然后将其应用到我现有的代码中。具体来说，我需要将 185px 替换为当时父 div 的高度。任何帮助将不胜感激。

【问题讨论】：

$(this).outerHeight(true) 应该为您提供父 div 的高度，但这只会在您设置 top: $(this).outerHeight(true) 时将覆盖 div 放置在该位置@这就是您想要的吗？
似乎无法让它工作。用您的代码替换了 185px，但我的 jQuery 不是最好的。我应该添加其他东西吗？叠加功能是一种上滑/下滑效果，因此需要在第二个主代码行上指定一个高度，以便在鼠标关闭时再次将自身向下推。

标签： jquery hover jquery-animate overlay dimensions

【解决方案1】：

在 JQuery 中尝试outerHeight() (Source)：

top: $(this).outerHeight(true) //specfiy true because we want to include margins

编辑：虽然，如果您想将子元素垂直放置在父元素之后，请尝试：

top: $(this).outerHeight(true) + $(this).position().top

【讨论】：

这可能不会给他想要的效果。见我上面的评论
啊，是的，我想他现在你提到它可能会混淆他的意思，上面的代码会给他父母的身高，但他可能想把它添加到$(this).position().top我会编辑包括。
感谢您的建议，但我似乎无法使用现有代码。
如果我将 185px 替换为代码，它会向上滑动但只是停留在那里而不是在 mouseoff 时向下滑动。
您确定不需要同时反转 0 和其他值吗？如果您想在悬停时将其向下滑动，然后在鼠标悬停时进行备份，这就是您需要做的吗？