Home/ Questions/Q 9064359
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T16:13:46+00:00

I have a sequence of images to create an animation. this works by using

  • 0

I have a sequence of images to create an animation. this works by using the coding below, however I am having the common problem of multiple clicks messing up the animation as it starts a new one.

I need to be able to disable the click while the animation is running, or a similar effect. it can either disable the click until the animation is finished, or reset the animation to start again and clear the currently running sequence.

I currently have the following code:

$(".startbutton").click( function() {
$(this).clearQueue( function() {

$(this).find("ul li:nth-child(1)").delay(124).animate({opacity: 0.0}, 0).delay(1860).animate({opacity: 1.0}, 0);
$(this).find("ul li:nth-child(2)").delay(124).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(3)").delay(248).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(4)").delay(372).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(5)").delay(496).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(6)").delay(620).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(7)").delay(744).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(8)").delay(868).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(9)").delay(992).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(10)").delay(1116).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(11)").delay(1240).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(12)").delay(1364).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(13)").delay(1488).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(14)").delay(1612).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(15)").delay(1736).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(16)").delay(1860).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(17)").animate({opacity: 0.0}, 0).delay(1984).animate({opacity: 1.0}, 0);

 });
});

the .clearQueue I inserted works in that the animation can no longer be clicked multiple times and mess it up. however, once the animation sequence has finished, the animation can no longer be clicked and does not run for a second time.

I’m guessing I need to ‘clear’ the ‘clearQueue’ or something similar.

If anyone has any suggestions it would be appreciated. I have tried using the ‘:animated’ solution that people have suggested in other similar posts which seemed a sensible solution, but it has not solved the problem so far.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, since OP provided the example code, I will rework this answer accordingly.

    Here is the working version:

    http://jsfiddle.net/qZGMW/

    First, use the flag as per my original suggestion:

    var started = false;
$(selector).click(function() {
    if (started) { return; }
    started = true;
    $(this).stop(); // Do not use clearQueue
    // Do animation normally
    $(lastOne).animate(param, param, function() { started = false; });
});
    • 0