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

reset state to original on hover out

本文关键字：状态原始原始状悬停更新时间：2023-09-26

我有这样的东西：

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

请帮忙。

如果没有其他动画，则可以使用.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)很重要，因为它使它在动画结束时跳跃。这是文件。

您可以使用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);
});