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 用于单独的

动画，jquery 是当我们将鼠标悬停在 Logo 上时用于所有

的动画。

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

我认为这就是我的 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');
        });
    })
})

只是添加了一个回调函数来删除de inline styling!