頁面加載時的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

也許這樣的事情是你找什麼：

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

注意色彩的動畫像這些需要jQuery UI的或最好是剛小得多彩動畫腳本。

編輯：使箱子動畫上的負載，做這樣的事情：

$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