如何使jQuery动画（{底部...工作

我试图创建一个简单的动画，其中一个文本块下降到其包含div时，该div是悬停结束。的jsfiddle这里：http://jsfiddle.net/EFhVp/1/如何使jQuery动画（{底部...工作

出于某种原因，我的代码工作完全按预期在Firefox，而不是在Chrome或的jsfiddle

什么是发生在Firefox（预计）：隐藏的文本在下降（从顶部）时我将鼠标放在上面，然后从容器上抬起鼠标

在Chrome和jfiddle中会发生什么：文本类型向上拍摄，然后在鼠标关闭时消失。

我怀疑当我为“bottom：”属性设置动画时会出现意想不到的情况，但我无法弄清楚。

2012-02-16 emersonthis

使用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"); 
    } 
    ); 
});

来源

2012-02-16 02:37:29 imsky

在不同的说明：我使用“底部”属性的原因是将内部div放在容器上方。我看到你的版本使用'top：“ - 100％”'更简单“，但缺点是用户鼠标悬停时出现动画div（因为它是从容器顶部开始的）。任何想法如何解决这个问题？ – emersonthis 2012-02-16 15:51:56

是的，这里有几种方法：如果您知道标题的高度在所有实例中都是恒定的，则可以在CSS和JS中将-100％更改为-50px（或实际高度）;如果你不能保证，那么你可以计算加载的outerHeight，并用JS来抵消每个标题的高度。 – imsky 2012-02-16 21:16:18

完美。标题高度不一致。 outerHeight解决方案实际上是我在发布这个问题之前要做的事情，所以我感觉很棒。计算.hover（）函数中的outerHeight是否可怕，而不是将所有不同的标题高度存储为变量？对于任何其他可能会发现这种情况的jQuery新手：注意将'.height（）'与'.outerHeight（）'混淆。只有后者包括填充，所以这是你需要的这种东西。起初我很困惑，因为我认为填充是一种“内部”的东西。 – emersonthis 2012-02-17 14:52:26

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

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

来源

2012-02-16 03:24:28 Bert

我还没有尝试过，但它动画容器（.entry-content），而不是内部div。 – emersonthis 2012-02-16 15:42:13

如何使jQuery动画（{底部...工作

回答

相关问题