http://jsfiddle.net/motocomdigital/b22Yt/1/
我正在尝试为div悬停时在框内的绝对div定位做一个基本动画。
当div悬停时，div.inside应该从上到下进行动画处理。使用类。内部框是动态的，因此为什么我必须使用UI方式。
请参见jsFiddle以测试会发生什么。在Firefox中，其动画效果。在Safari和Chrome中，不是吗？很奇怪，我尚未在Mac上测试过IE。
我从这里得到了开关类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 );
});
最佳答案
当使用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);
});
无需上课或其他任何内容，简单明了，下面是一个小玩意儿，用于演示它：http://jsfiddle.net/b22Yt/4/
关于jquery - jQuery UI Switch类动画不是在Safari/Chrome中制作动画，而是在Firefox中制作动画？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8379658/