1

我想在页面加载时更改两个导航链接的颜色。让它们更显眼。我同时加载了 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 小提琴：这里

4

3 回答 3

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)
});
于 2013-07-18T13:22:49.357 回答
1

默认情况下，jquery 不能为颜色设置动画。为此，您需要一个插件。

你可以得到一个是 jquery ui ( http://jqueryui.com/animate/ ) 或独立的 ( http://www.bitstorm.org/jquery/color-animation/ ) 的一部分。

于 2013-07-18T13:23:25.280 回答
1

您可以使用 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;}
}
于 2013-07-18T13:29:32.817 回答