.animate不能在Firefox中工作(不过.css可以）

.animate not working in Firefox (.css does though)

本文关键字：不过 css 可以 工作 不能 Firefox animate      更新时间：2023-09-26

好的，到目前为止，这在Chrome中有效，但在Firefox中无效。这很简单，所以我不确定发生了什么。如果我把.animate改为.css，它会很好地工作(减去动画(。

$("#superfish-1 > li").hover(function() {
    $(this).animate({"border-left" : "3px solid #A5D572", "margin-left" : "-2px"}, "fast");
}, function() {
    $(this).animate({"border-left" : "1px solid #EFEFEF", "margin-left" : "0px"}, "fast");
});

感谢

hover((函数的第二个参数也应该是animate()函数，而不是css()。如果css()应该在那里，则移除它的第二个参数("fast"(。

默认情况下，jquery不能为颜色和边框类型设置动画。除非你使用一些插件，否则我建议你只设置边框宽度的动画。

正如@mingos所提到的，你应该删除css函数中的fast参数。

http://jsfiddle.net/meo/Gsqre/1/

在Chrome中测试。颜色不设置动画。

此版本为带和边距设置动画，适用于所有浏览器：

$("#superfish-1 > li").hover(function() {
    $(this).animate({"border-left-width" : "3px", "margin-left" : "-2px"}, "fast");
}, function() {
    $(this).css({"border-left-width" : "1px", "margin-left" : 0});
});

如果你愿意，你可以在css中单独更改颜色，甚至制作动画。或者在css中制作整个动画：http://jsfiddle.net/meo/Gsqre/3/

好的，这就是你的做法。你必须先css边框颜色，然后动画宽度：

请确保使用borderWidth或borderLeftWidth属性(不带引号(，否则由于某些原因无法使用。

$("#superfish-1 > li").hover(function() {
    $(this).css({"border-left" : "1px solid #A5D572"}).animate({borderLeftWidth : "3px", "margin-left" : "-2px"}, "fast");
}, function() {
    $(this).animate({borderLeftWidth : "1px", "margin-left" : "0px"}, "fast").css({"border-left" : "1px solid #EFEFEF"});
});
相关文章：