Question

当光标悬停在主跨上时 - 动画工作正常，但是当我从中移除光标时 - 动画仍在工作。

我怎样才能阻止它，为什么它仍然存在？

$('#menu span:first').hover(function (){
  function pulse(){
    // here I have animation
  }
  pulse();
}, function(){
  //Here I tried to set the initial opacity to stop animation
  $('#menu span:first').animate({opacity: '0.5'}, 400);
});

FIDDLE

Answer 1

详细了解.finish()

它“停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素的所有动画”

$('#menu span:first').finish()

另一种选择是.stop( [queue ] [, clearQueue ] [, jumpToEnd ] )

$('#menu span:first').stop()

它“停止匹配元素上当前正在运行的动画。”

Answer 2

使用stop(true)事件

工作小提琴HERE

代码：

$(document).ready(function (){
      $('#menu span:first').hover(function (){
        function pulse(){
          $('#menu span:first span').eq(0).delay(100).animate({opacity: '1'},400);
          $('#menu span:first span').eq(1).delay(200).animate({opacity: '1'},400);
          $('#menu span:first span').eq(2).delay(300).animate({opacity: '1'},400);
          $('#menu span:first span').eq(3).delay(400).animate({opacity: '1'},400);
          $('#menu span:first span').eq(4).delay(500).animate({opacity: '1'},400);
          $('#menu span:first span').eq(5).delay(600).animate({opacity: '1'},400);
          $('#menu span:first span').eq(6).delay(700).animate({opacity: '1'},400);

          $('#menu span:first span').eq(0).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(1).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(2).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(3).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(4).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(5).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(6).animate({opacity: '0.3'},400, pulse);
        }
        pulse();
      }, function(){
        $('#menu span:first').animate({opacity: '0.5'}, 400);
      });
      $('#menu span:first').mouseout(function() {
          $('#menu span:first span').stop(true);
      });
});

这意味着：当你将其删除时，请停止动画$('#menu span:first span')

Answer 3

您可以使用stop()为span内的所有子span完成动画。

$(document).ready(function (){
      $('#menu span:first').hover(function (){
        function pulse(){
          $('#menu span:first span').eq(0).delay(100).animate({opacity: '1'},400);
          $('#menu span:first span').eq(1).delay(200).animate({opacity: '1'},400);
          $('#menu span:first span').eq(2).delay(300).animate({opacity: '1'},400);
          $('#menu span:first span').eq(3).delay(400).animate({opacity: '1'},400);
          $('#menu span:first span').eq(4).delay(500).animate({opacity: '1'},400);
          $('#menu span:first span').eq(5).delay(600).animate({opacity: '1'},400);
          $('#menu span:first span').eq(6).delay(700).animate({opacity: '1'},400);

          $('#menu span:first span').eq(0).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(1).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(2).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(3).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(4).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(5).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(6).animate({opacity: '0.3'},400, pulse);
        }
        pulse();
      }, function(){

        $('#menu span').children().stop();
      });
});

<强> Demo

Answer 4

只需使用指示布尔值。

fiddle

$(document).ready(function (){
      $('#menu span:first').hover(function (){
        $('#menu').data('pulsating',true);
        function pulse(){
          if(!$('#menu').data('pulsating')) return;
          $('#menu span:first span').eq(0).delay(100).animate({opacity: '1'},400);
          $('#menu span:first span').eq(1).delay(200).animate({opacity: '1'},400);
          $('#menu span:first span').eq(2).delay(300).animate({opacity: '1'},400);
          $('#menu span:first span').eq(3).delay(400).animate({opacity: '1'},400);
          $('#menu span:first span').eq(4).delay(500).animate({opacity: '1'},400);
          $('#menu span:first span').eq(5).delay(600).animate({opacity: '1'},400);
          $('#menu span:first span').eq(6).delay(700).animate({opacity: '1'},400);

          $('#menu span:first span').eq(0).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(1).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(2).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(3).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(4).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(5).animate({opacity: '0.3'},400);
          $('#menu span:first span').eq(6).animate({opacity: '0.3'},400,pulse);
        }
        pulse();
      }, function(){
        $('#menu span:first').animate({opacity: '0.5'}, 400);
          $('#menu').data('pulsating',false);
      });
});

停止悬停动画

4 个答案: