jQuery repeated event till user clicks on it

Question

Hi,

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

You can use setInterval and then assign it to a variable. When the user clicks on the $("#box") button call clearInterval passing the variable as the parameter.

var intervalId = setInterval(function(){/*your code*/}, 4000);

$("#box").click(function(){
    clearInterval(intervalId);
});

Answer 2

use clearinterval or setinterval function of javascript for hiding dynamically created elements

check following link for more detail http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

Answer 3

Starting the timer:

var timer = window.setInterval(yourAnimationFunction, 4000);

Killing the timer:

$('#box').click(function(){
  clearInterval(timer);
});

Answer 4

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().

Kind Regards

--Andy