Have Geek Brain

Repeat jQuery event until user clicks on it

I have an animation on a partially hidden div container that will execute when the result returned from the ajax request is true. (The animation actually just brings the box into a larger view and then slides down again)

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

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

?

Any help is appreciated. Thanks:)

Based on jAndy and rahul code .. this is exactly how I thought of implementing it (dummy setup).

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 stop the animation:

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


a source to share


4 answers 


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

To start this animation, just call

anibox()


anywhere in your code to stop using it:

$('box').stop();

in the click event handler. This is the "jQueryish" way, without setInterval()

.

+3


a source


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



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

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


a source


use clearinterval or setinterval javascript function to hide dynamically created elements

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

+1


a source


Timer start:

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

Killing the timer:

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


a source






More articles:


All Articles