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

页面加载时jQuery背景色动画

1 个答案: