CODEWITHSUNDEEP
jquery
Lyon
Lyon

Reputation: 7364

jQuery repeated event till user clicks on it

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

Upvotes: 2

Views: 1059

Answers (4)

jAndy
jAndy

Reputation: 236022

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

Upvotes: 3

rahul
rahul

Reputation: 187060

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

Upvotes: 2

Greg W
Greg W

Reputation: 5239

Starting the timer:

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

Killing the timer:

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

Upvotes: 1

Pranay Rana
Pranay Rana

Reputation: 176906

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/

Upvotes: 1

Related Questions