如何使 jQuery animate({bottom... 工作答案

【问题标题】：How to make jQuery animate({bottom... work如何使 jQuery animate({bottom... 工作
【发布时间】：2012-02-16 11:24:28
【问题描述】：

我正在尝试创建一个简单的动画，其中当 div 悬停在其上时，文本块会下降到其包含的 div 中。

我在这里创建了一个 jsfiddle：http://jsfiddle.net/EFhVp/1/

出于某种原因，我的代码在 Firefox 中按预期完美运行，但在 Chrome 或 jsfiddle 中却没有。

在 Firefox 中发生了什么（预期）：当我将鼠标悬停在容器上时，隐藏的文本（从顶部）下降，然后在鼠标离开容器时又上升

在 chrome 和 jfiddle 中会发生什么：文本向上发射，然后在鼠标关闭时消失。

我怀疑当我为“底部：”属性设置动画时发生了一些意外，但我无法弄清楚。

【问题讨论】：

标签： jquery css cross-browser

【解决方案1】：

使用bottom 属性是一种奇怪的方法。我已将您的代码转换为使用top，并且动画可以跨浏览器运行：http://jsfiddle.net/EFhVp/2/

$(function() {
    $(".projectgrid .entry-content").hover(function() {
        $(".projecttags", this).animate({
            top: "0px"
        }, "slow");
    }, function() {
        $(".projecttags", this).animate({
            top: "-100%"
        }, "slow");
    }
    );
});

【讨论】：

另外一个说明：我使用“bottom”属性的原因是将内部 div 放在容器的正上方。我看到你的版本使用top:"-100%" 是多么简单，但缺点是用户鼠标悬停和动画 div 出现之间存在延迟（因为它是从容器顶部上方开始的）。任何想法如何解决这个问题？
是的，这里有几种方法：如果您知道标题的高度在所有实例中都是恒定的，您可以在 CSS 中将 -100% 更改为 -50px（或实际高度）和JS；如果您不能保证，那么您可以计算加载时的 outerHeight 并使用 JS 将每个标题偏移该高度。
完美。标题高度不一致。 outerHeight 解决方案实际上是我在发布这个问题之前要做的，所以我对此感觉很好。在 .hover() 函数中计算 outerHeight 而不是将所有不同的标题高度存储为变量是不是很糟糕？对于可能会发现此问题的任何其他 jQuery 新手：小心混淆 .height() 和 .outerHeight()。只有后者包括填充，所以它是你需要的。起初这让我很困惑，因为我认为填充是“内部”的东西。
您可以计算outerHeight一次，然后重新使用该值。不需要在负载时计算它。

【解决方案2】：

     $('.projectgrid .entry-content').hover(
function(){
    $(this).stop().animate({marginTop:'-25px',}, 300);  
    },
    function(){
    $(this).stop().animate({marginTop:'0px',}, 1000);
    }
);

试试这个。它适用于所有浏览器

【讨论】：

我没有尝试过，但它会为容器（.entry-content）而不是内部 div 设置动画。