页面加载时的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