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 を使用せず、より軽量な Web サイトを使用する場合

あなたは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'});
});​