jquery - jQuery / CSS3 动画冲突

Question

我有一个小的 css3 动画，使我的文本从白色变为蓝色，然后从蓝色变为白色（当鼠标不在元素上时恢复正常）。

nav a {
display: block;
height: 20px;
font-size: 16px;
text-decoration: none;
color: #FFFFFF;
transition: color 1s;
-webkit-transition: color 1s;
}

nav a:hover {
color: #0092DB;
}

这工作正常，直到 jquery 启动这个动画：

$(function() {
$('#headerCenter img').hover(
    function () {
        $('nav a').animate({
            color: "#0092DB"
        }, 500);
    },
    function () {
        $('nav a').animate({
            color: "#FFFFFF"
        }, 500);
    })
})

CSS3 用于单个 < li > 动画，而 jquery 是当我们将鼠标悬停在徽标上时所有 < li > 的动画。

我注意到，当启动 Jquery 动画时，它会将样式属性添加到我的 <a> 中，并使用正确的颜色并擦除样式表中的颜色。

我认为这就是为什么我的 CSS3 动画不再起作用的原因，因为它需要颜色：#FFFFFF 来进行过渡。希望，你有一个解决方案！

Answer 1

$(function() {
$('#headerCenter img').hover(
    function () {
        $('nav a').animate({
            color: "#0092DB"
        }, 500);
    },
    function () {
        $('nav a').animate({
            color: "#FFFFFF"
        }, 500, function () {
            $('nav a').removeAttr('style');
        });
    })
})

只需添加一个回调函数即可删除内联样式！

Answer 2

你为什么不这样做：

在等式中添加一个额外的 css 类：

nav a:hover, nav.active {
color: #0092DB;
}

然后这样做

$(function() {
$('#headerCenter img').hover(
    function () {
        $('nav').addClass('active')
    },
    function () {
        $('nav').removeClass('active')
    })
})