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 回答