Jquery动画链接

我想在页面加载时更改两个导航链接的颜色。让他们更容易看到。我已经加载了jquery和jquery.animate-colors。这是我的代码，但它没有任何作用。在我的网站或JS Fiddle上不起作用

<div class="main_body">
        <div class="nav1"><a href="http://www.google.com">Test1</a></div>
        <div class="nav1"><a href="http://www.google.com">Test2</a></div>
        <div id="color" class="nav1"><a href="http://www.google.com">Test3</a>    </div>
        <div id="color2" class="nav1"><a href="http://www.google.com">Test4</a></div>
    </div>

$(document).ready(function(){
   $("#color").animate({color: '#3F3FFF'})
});

$（文档）.ready（函数（）{
$（“#color”）.animate（{color:'#3F3FFF'}）
});

---

JS Fiddle:

您需要在项目中包含JQueryUI

以下是一个例子：

另外，不要对多个元素使用相同的ID

<div class="main_body">
    <div class="nav1"><a href="http://www.google.com">Test1</a>
    </div>
    <div class="nav1"><a href="http://www.google.com">Test2</a>
    </div>
    <div class="nav1"><a href="http://www.google.com">Test3</a>
    </div>
    <div class="nav1"><a href="http://www.google.com">Test4</a>
    </div>
</div>

$(document).ready(function () {
    $("a").animate({
        color: 'green'
    }, 2000)
});

$（文档）.ready（函数（）{
$（“a”）。制作动画({
颜色：“绿色”
}, 2000)
});

默认情况下，jquery无法设置颜色动画。为了做到这一点，你需要一个插件

您可以获得一个属于jquery ui（）的界面或一个独立的界面（）。

您可以使用CSS动画来完成这一点，而不是使用jquery（正如前面提到的，没有插件就无法设置颜色动画）。此外，这个fiddle使用您的HTML代码，但是您应该更正它，以删除对多个元素使用相同ID的情况

---

Id应该是唯一的。Id

s意味着是唯一的，这就是在jquery中使用Id

s。如果您希望为多个元素添加相同的行为，那么在JSFIDLE中添加一个类选择器。另外，您没有包括jquery。我不确定，但我认为动画需要jquery ui库。我对ui的看法是错误的，但需要jquery。我将最后一个div更改为id color2，将jquery添加到js fiddle，仍然没有任何内容。我已经加载了jquery和jquery.animate-colors。

#color a {
    animation: colorchange 5s linear 2s infinite alternate;
    -webkit-animation: colorchange 5s linear 2s infinite alternate; /* Safari and Chrome */
}


@keyframes colorchange
{
from {color: red;}
to {color:blue;}
}

@-webkit-keyframes colorchange /* Safari and Chrome */
{
from {color: red;}
to {color:blue;}
}