jquery - 链接上的 jQuery 动画

Question

我有以下 HTML：

<div class="olympics" style="display: block; position: absolute; left: 250px; top: px;">

   <a style="display: inline-block; float: left; height: 20px; margin: 5px;" href="#">Link 1</a>
   <a style="display: inline-block; float: left;  height: 20px; margin: 5px;" href="#">Link 2</a>

 </div>​

和JS：

$('.olympics a').hover(function() {
    $(this).animate({
        backgroundColor: "#aa0000",
        color: "#fff"
    }, 1000);
}, function() {
    $(this).animate({
        backgroundColor: "#fff",
        color: "#aa0000"
    }, 1000);
});​

知道为什么这个动画不起作用吗？

jsfiddle 演示在这里：http: //jsfiddle.net/Seefeld/NzhxH/13/

Answer 1

您是否在导入中包含了 jQueryUI 包？在我将它添加到您的小提琴中之后，它正在工作

http://jsfiddle.net/NzhxH/19/

Answer 2

如果你不想使用 jquery ui 并且有一个更轻量级的网站

你可以用两种方法做到这一点

CSS3：

http://jsfiddle.net/NzhxH/41/

-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-ms-transition: all 400ms linear;

jQuery：

http://jsfiddle.net/NzhxH/39/

$('.olympics div').hover(function() {
    $(this).children('span').stop().animate({
        opacity:1
    }, 1000);
    $(this).children('a').delay(800).css({'color':'#fff'});
}, function() {
    $(this).children('span').stop().animate({
        opacity:0
    }, 1000);
    $(this).children('a').delay(800).css({'color':'#aa0000'});
});​