Question

I have an animation on a partially hidden div container that will execute when the result returned from an ajax query is true. (The animation actually just brings the box into larger view, and then sliding it back in again)

$('#box').animate({'right':'-184px'}, 300, 'easeOutBounce');
$('#box').animate({'right':'-194px'}, 150, 'easeOutExpo');

How can I make this animation repeat every 4 seconds until the user clicks on $('#box')?

Any help is greatly appreciated. Thanks 🙂

Based on jAndy’s and rahul’s code..this is how I’m thinking of implementing it (fictitious setting).

This is the code that starts the animation:

// declares the variable first or $('#stop').click() will return undefined variable
var intervalId = '';
$('#submit').submit(function () {
  var intervalId = setInterval(function(){
    $('#box').animate({'right':'-184px'}, 300, 'easeOutBounce');
    $('#box').animate({'right':'-194px'}, 150, 'easeOutExpo');
  }, 4000);
});

This is the code that will supposedly will stop the animation:

$('#stop').click(function () {
  clearInterval(intervalId);
});

Answer 1

function anibox(){
   $('#box').delay(4000).animate({'right':'-184px'}, {duration: 300, easing: 'easeOutBounce'});
   $('#box').animate({'right':'-194px'}, {duration: 150, easing: 'easeOutExpo', complete: anibox});
}

To start that animation just call

anibox()

anywhere in your code, to stop it use:

$('box').stop();

in your click event handler.
That is the ‘jQueryish’ way, without setInterval().