0

私は次のようなものを持っています:

 $(".leftCues").hover(
        function(){
                $(".item1", ".item2", ".item3", ".item4", ".item5").stop(true,true)
                $(".item1").animate({opacity:1.0}, 2000, function()  {
                  $(".item1").animate({opacity:0.0},2000, function() {
                    $(".item2").animate({opacity:1.0},2000, function()  {
                      $(".item2").animate({opacity:0.0}, 2000, function() {
                        $(".item3").animate({opacity:1.0}, 2000, function()  {
                          $(".item3").animate({opacity:0.0}, 2000, function() {
                            $(".item4").animate({opacity:1.0},2000, function()  {
                              $(".item4").animate({opacity:0.0}, 2000, function() {
                                $(".item5").animate({opacity:1.0}, 2000, function()  {
                                });
                              });
                            });
                          });
                        });
                      });
                    });
                  });
                });
        },
        function(){
                $(".item5").css('opacity', 0.0);
        }       
  );

CSS:

.item5, .item3, .item1 {
  clear: both;
  float:left;
  margin-top: 6%;
  color: #999999;
  font-size: 40px;
  margin-left: 25px;
  opacity:0.0;
}

.item2, .item4 {
  clear: both;
  float:right;
  margin-top: 6%;
  color: #999999;
  font-size: 40px;
  margin-right: 25px;
  opacity:0.0;
}

ホバーするとアニメーションが正常に動作しますが、ホバーアウトすると以前の状態がリセットされません。もう一度カーソルを合わせると、前のアニメーションがまだ実行されている間に新しいアニメーションが開始されます。

以前のホバーオン状態をリセットするにはどうすればよいですか? ホバーアウトすると、元の状態に戻りたい (最初にホバーする前のように)

私のアニメーションでは、不透明度を 1.0 から 0.0 に切り替えるだけで、css は不透明度 0.0 から始まります。

助けてください。

4

2 に答える 2

3

他にアニメーション化するものがない場合は.fadeIn()、またはを使用できます。fadeOut()

このようなもの

$('#item').hover( function() {
      $('#item2, #item3, #item4, #item5').stop(true, true).fadeIn();
  },
  function () {
    $('#item2, #item3, #item4, #item5').stop(true, true).fadeOut();
  }
);

.stop(true, true)アニメーションの最後にジャンプするので、これは重要です。これがドキュメントです。

于 2013-02-20T05:42:03.783 に答える
1

jQuery.mouseover()と.mouseout()関数を使用できます。

http://api.jquery.com/mouseover/

http://api.jquery.com/mouseout/

$(".leftCues").mouseover(function(){
                $(".item1").animate({opacity:1.0}, 2000, function()  {
                  $(".item1").animate({opacity:0.0},2000, function() {
                    $(".item2").animate({opacity:1.0},2000, function()  {
                      $(".item2").animate({opacity:0.0}, 2000, function() {
                        $(".item3").animate({opacity:1.0}, 2000, function()  {
                          $(".item3").animate({opacity:0.0}, 2000, function() {
                            $(".item4").animate({opacity:1.0},2000, function()  {
                              $(".item4").animate({opacity:0.0}, 2000, function() {
                                $(".item5").animate({opacity:1.0}, 2000, function()  {
                                });
                              });
                            });
                          });
                        });
                      });
                    });
                  });
                });
}).mouseout(function(){
    $(".item5").css('opacity', 0.0);
});
于 2013-02-20T05:43:58.410 に答える