jQuery / CSS3 动画冲突答案

【问题标题】：JQuery / CSS3 animation conflictsjQuery / CSS3 动画冲突
【发布时间】：2013-07-05 08:54:52
【问题描述】：

我有一个小的 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 是当我们将鼠标悬停在徽标上时所有的动画。

我注意到，当 Jquery 动画启动时，它会为我的设置一个样式属性，并使用正确的颜色并擦除样式表中的颜色。

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

【问题讨论】：

您似乎在同一个元素上启动了两个不同的动画。我建议为您的 jQuery 动画使用更窄的选择器，以便它与您的其他动画的 CSS 不匹配。
据我了解，您的 jQuery 动画更改了元素的 CSS，这些元素实际上不应该是该动画的一部分，而是具有 CSS 动画。将 jQuery 选择器更改为仅匹配您想要动画的对象应该可以防止 jQuery 更改不相关对象的 CSS 属性。
不，nav a 是 jquery 动画的一部分。在 Css3 动画中，它们分别从白色变为蓝色，在 JQuery 动画中，它们从白色变为组中的蓝色
你能设置 jsfiddle 吗？你用 JQuery Ui 做彩色动画吗？
好的，我会做一个 jsfiddle，但它是相同的代码。我使用 JQuery Color 来制作颜色动画。

标签： jquery css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你为什么不这样做：

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

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

然后这样做

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

【讨论】：