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 に答える