jQuery UI Switch Class Animation 在 Safari/Chrome 中没有动画 - 但在 Firefox 中有动画？

Question

http://jsfiddle.net/motocomdigital/b22Yt/1/

我正在尝试制作一个基本动画，以便当 div 悬停时在盒子内进行绝对 div 定位。

当 div 悬停时，div.inside 应该从上到下进行动画处理。使用类。内部框是动态的，因此我必须使用 UI 方式。

参见jsFiddle测试会发生什么。在 Firefox 中，它有动画。在 safari 和 chrome 中，不是吗？奇怪的是，我还没有测试过 IE，因为我在 mac 上。

我从这里得到了 switch 类 src http://jqueryui.com/docs/switchClass/

我的代码是否做错了什么？即使在 Firefox 中也会出现一些神经兮兮的情况。

任何专业人士的帮助都会非常感谢!

http://jsfiddle.net/motocomdigital/b22Yt/1/

标记

<div class="box">

    <div class="inside bottom">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi purus, tincidunt sit amet aliquet quis, semper vel urna. Morbi mollis nulla nisi, ut euismod elit. Nam et arcu velit, id faucibus velit. Sed blandit feugiat quam, nec laoreet nisl suscipit quis.

    </div>

</div>

CSS

.box {
    width: 200px;
    height: 200px;
    background: red;
    float: left;
    margin: 10px;
    overflow: hidden;
    position: relative;
}

.inside {
    position: absolute;
    background: black;
    color: #ffffff;
    font-size: 10px;
    overflow: hidden;
    padding: 10px;
    width: 180px;
    word-wrap: break-word;
}


.top {
    top: 0;
}

.bottom {
    bottom: 0;
}

脚本

$(".box").hover(function(){

     $(this).children(".inside").switchClass( "bottom", "top", 300 );

 }, function() {

     $(this).children(".inside").switchClass( "top", "bottom", 300 );

});

Answer 1

当使用 UI switchClass 方法进行动画处理时，您应该始终在两个类中使用相同的 css 选择器，因为 jQuery UI 需要进行比较。

换句话说，如果类看起来像:

.top {top: 0;}
.bottom {top: 200px;}

动画在跨浏览器上可以正常工作，但如果类看起来像:

.top {top: 0;}
.bottom {bottom: 0;}

jQuery 将无法比较这两个值并在它们之间创建动画。尝试一下，您就会看到。

对于您的具体示例，您根本不需要 jQuery UI，而且这似乎是一种奇怪的方法来执行一些基本操作，例如向上/向下动画元素。

我会这样做:

$(".box").each(function() {
    var self = $(this),
        child = self.children('.inside'),
        _top = parseInt(self.css('height')) - parseInt(child.css('height')) - 20; //  -20 for padding
        child.css({top: _top});
        $(this).data('_top', _top);
});

$(".box").hover(function(){
    $(this).children(".inside").stop(true, true).animate({top: 0}, 300);
 }, function() {
    $(this).children(".inside").stop(true, true).animate({top: $(this).data('_top')}, 300);
});

不需要类(class)或其他任何东西，直接，这里有一个 fiddle 来展示它的实际效果:http://jsfiddle.net/b22Yt/4/