jQuery UI - addClass/removeClass : Unwanted white background 问题

Question

我正在尝试使用 jqueryUI 的 addClass() 和 removeClass() 设置悬停效果。
这就是我想出的:http://jsfiddle.net/5aS77/ .
如您所见，'onmouseout'，背景暂时变为白色，然后再次'跳'为蓝色。
我只希望动画从蓝色变为粉色，反之亦然，没有任何“中断”。

我知道使用 CSS3 是可行的，虽然它有两个主要缺点，但我已经尝试过了:
1) 并不是所有的浏览器都支持transition属性。
2) 它没有 onmouseout 效果。 (虽然可以用一些JS来实现。)

Answer 1

白色闪光 是因为 jQuery 没有基色来设置动画，因为背景颜色是在 .nav 上设置的类而不是 <a>元素。

您可以按如下方式编辑规则以去除白色闪光。

.nav a {
    background-color:blue;
    ...
}

.nav .a_hover { // <--- need the .nav here otherwise CSS specificity results in blue still winning
    ...
}

此外，如果您愿意，这里有一个稍微简洁的 jQuery 实现:

$('a').on({
    mouseenter:function() {
        $(this).stop().animate({backgroundColor:'#f89ed5'}, 250);
    },
    mouseleave:function() {
        $(this).stop().animate({backgroundColor:'blue'}, 250);
    }
});

有了这个，.a_hover可以删除类，尽管您仍然需要 background-color:blue在 .nav a 上避免初始白色闪光的规则。 .a_hover 中的其他属性不需要，因为它们已经在 .nav a 上退出规则。