JQuery reprogramming function

Question

I want to have a div that animates the currently active image from the view and instead animates another image. There are several such sections, and each of them should have the same basic functionality, but associated with different images. The problem I am facing is that you can click many of the divs to complete the animation, which starts other animations at the same time. My goal is to be able to run only one animation at a time, and when the animation ends, you can run the next animation. I tried using unbind, which works fine, but then I will have to re-confirm it later, and I don’t know how to do it. I am really a jQuery noob, so I would highly approve of the answer. Thanks!

My code is:

$('.div1').click(function clickevent() { $('.img2, .img3').animate({ opacity: 0.1, left: 600 }, 1000, function() { $('.img1').animate({ opacity: 1, left: 0 }, 500, function() { $('.div2, .div3').bind('click', clickevent); /* Here I want to rebind the function */ }); }); $(this).addClass("active"); $('.div2, div3').removeClass("active"); $('div2, .div3').unbind('click', clickevent); }); 

I have two more code blocks for .div2 and .div3 that look the same, but with different classes in different places. Is there a way to make images finish their animation before you can animate it again? Thanks.

Answer 1

That's what you need:

 var canAnimate = true; $('.div1').click(function clickevent() { // these 4 lines have to be in all code blocks (ie. for .div2 and .div3) if (! canAnimate) { return; } canAnimate = false; $('.img2, .img3').animate({ opacity: 0.1, left: 600 }, 1000, function() { $('.img1').animate({ opacity: 1, left: 0 }, 500, function() { canAnimate = true; // this should also be included for .div2 and .div3 code blocks }); }); $(this).addClass("active"); $('.div2, div3').removeClass("active"); }); 

Answer 2

I think queue () will add animations, but it will not stop them, so if you click 10 times on the images, the click handler will animate it 10 times, but one after the other. I assume that you only want to animate the images when the image is not animating, so you can use:

 $('.div1').click(function clickevent() { // When no image is currently animated then perform the animation if($j('.img1, .img2, .img3').is(':animated') == false) { $('.img2, .img3').animate({ opacity: 0.1, left: 600 }, 1000, function() { $('.img1').animate({ opacity: 1, left: 0 }, 500); }); $(this).addClass("active"); $('.div2, div3').removeClass("active"); } else { // There is currently an animation runnig, do nothing } }); 

See this for more information: http://api.jquery.com/animated-selector/

You should also get some information about caching your selection results.