1

这可能非常简单且易于修复（或不可能），但我一直在尝试在页面加载时实现悬停效果。

我有一个带有 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

4

1 回答 1

0

也许像这样的东西就是你要找的东西：

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

小提琴

请注意，像这样的彩色动画需要 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);
});

小提琴

于 2012-04-15T13:11:22.857 回答