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的和具有較輕的網站

ü可以用2種方式

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'}); 
});​