Question

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

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

出于某种原因，我的代码在Firefox中完美无缺，但在Chrome或jsfiddle中没有。

在Firefox中发生了什么（预期）：当鼠标悬停在鼠标上然后从鼠标上升回来时隐藏的文字从顶部下降

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

我怀疑当我为“bottom：”属性设置动画时会发生意想不到的事情，但我无法理解。

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

Answer 2

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

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

如何使jQuery动画（{bottom ... work

2 个答案: