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

Answer 2

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

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

2 个答案: