Question

好的，到目前为止这适用于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");
});

由于

Answer 1

hover（）函数的第二个参数也应该是animate()函数，而不是css()。如果要css()，请删除其第二个参数（"fast"）。

Answer 2

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

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

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

在Chrome中测试过。颜色没有动画。

此版本为with和margin设置动画，适用于所有浏览器：

$("#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/

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

.animate无法在Firefox中运行（但.css确实如此）

3 个答案: