javascript - 悬停时将状态重置为原始状态

Question

我有这样的东西:

 $(".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 开始。

请帮忙。

Answer 1

如果没有其他动画，您可以使用 .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) 很重要，因为它使它在动画结束时跳转。 Here's the documentation .