Question

我想在页面加载时更改两个导航链接的颜色。使它们更加明显。我加载了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'})
});

JS小提琴：here

Answer 1

您需要在项目中包含JQueryUI。

以下是一个示例：http://jsfiddle.net/UQTY2/142/

此外，不要对超过1个元素使用相同的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)
});

Answer 2

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

你可以获得一个属于jquery ui（http://jqueryui.com/animate/）或独立的一个（http://www.bitstorm.org/jquery/color-animation/）。

Answer 3

您可以使用CSS动画来完成此操作，而不是使用jQuery（如上所述，无法在没有插件的情况下为颜色设置动画）。此外，这个小提琴使用您的HTML代码，但您应该更正它以删除在多个元素上使用相同的ID。 http://jsfiddle.net/Ux9u5/5/

#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;}
}

Jquery动画链接

3 个答案: