1

When cursor is hovered on main span - the animation works fine, but when I remove the cursor from it - the animatioon is still working.

How can I stop it, and why it still going?

$('#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

Improve this question

4 Answers 4

Reset to default
1

Simply use an indicating boolean.

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);
      });
});
Improve this answer
0
1

Use stop(true) event

Working fiddle HERE

Code:

$(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);
      });
});

It means : Here when u do moust out , Stop animating $('#menu span:first span')

Improve this answer
4
  • Consider using stop(true) to clean animation queue, otherwise animation still continues if I hover and remove mouse several times.
    – Anton Boritskiy
    Commented Jul 23, 2014 at 12:46
  • this stops the animation while running, and leaves it in an unfinished state. especially the last animation is not played.
    – lukkysam
    Commented Jul 23, 2014 at 12:53
  • @lukkysam , so u want animation to be played?
    – Pratik Joshi
    Commented Jul 23, 2014 at 12:56
  • @jQuery Angry Bird : I think he wanted a smooth effect after leaving the text with the mouse. Perhaps I'm wrong, but it looks nicer imo.
    – lukkysam
    Commented Jul 23, 2014 at 13:01
1

You can use stop() to finish animation for all child span inside first 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

Improve this answer
1

Read more about the .finish()

It "Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements"

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

The other alternative is .stop( [queue ] [, clearQueue ] [, jumpToEnd ] )

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

It "Stop the currently-running animation on the matched elements."

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.