jQueryの背景色のアニメーションページの読み込み

Question

これは恐らく単純で簡単に修正できます（または不可能です）が、ページロードにホバー効果を実装しようとしていました。

私はそれはホバー上の背景色ですアニメーション化するのdivボックス付きナビゲーションシステム、および以下のjQueryを持っている：

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 


<script type="text/javascript"> 
var $jq = jQuery.noConflict(); 
/* Menu buttons fade */ 
     $jq(document).ready(function() { 
       $jq("#box").hover(function() { 
       $jq(this).stop().animate({ backgroundColor: "#FF9933"}, 400); 
       },function() { 
       $jq(this).stop().animate({ backgroundColor: "navy" }, 400); 
       }); 

     $jq("#box2").hover(function() { 
       $jq(this).stop().animate({ backgroundColor: "#9DE263"}, 400); 
       },function() { 
       $jq(this).stop().animate({ backgroundColor: "navy" }, 400); 
       }); 

     $jq("#box3").hover(function() { 
       $jq(this).stop().animate({ backgroundColor: "#0099FF"}, 400); 
       },function() { 
       $jq(this).stop().animate({ backgroundColor: "navy" }, 400); 
       }); 

     $jq("#box4").hover(function() { 
       $jq(this).stop().animate({ backgroundColor: "#8B0099"}, 400); 
       },function() { 
       $jq(this).stop().animate({ backgroundColor: "navy" }, 400); 
       }); 

     $jq("#box5").hover(function() { 
       $jq(this).stop().animate({ backgroundColor: "#336666"}, 400); 
       },function() { 
       $jq(this).stop().animate({ backgroundColor: "navy" }, 400); 
       }); 
     }); 
</script> 

私はしかし、何をしようとしている、しかしその代わりに、同じ効果を重複していますページが読み込まれたときに発生します。良い例はcss-tricksです - ナビゲーションバーのボタンの色が順番にアニメーション化されます。

誰でもお手伝いできますか？

ありがとうございます！たぶん

mlazim14

Answer 1

このようなものは、あなたが探して何です：これらのような色のアニメーションはjQueryのUIまたは好ましくはちょうどはるかに小さいカラーアニメーションスクリプトを必要とすること

var $jq = jQuery.noConflict(); 

$jq(document).ready(function() { 
    var colors = ["", "#FF9933", "#9DE263", "#0099FF", "#8B0099", "#336666"]; 

    $jq("[id^='box']").hover(function() { 
     $jq(this).stop().animate({ backgroundColor: colors[this.id.replace('box','')]}, 400); 
    },function() { 
     $jq(this).stop().animate({ backgroundColor: "navy" }, 400); 
    }); 
}); 

FIDDLE

注意。

EDIT：一部のコピーは幸せのコードを貼り付けている

$jq("[id^='box']").each(function() { 
     $jq(this).stop().delay(time).animate({ backgroundColor: colors[this.id.replace('box','')]}, speed, function() { 
      $jq(this).stop().animate({ backgroundColor: "navy" }, speed); 
     }); 
     time=time+(speed*2); 
}); 

FIDDLE