CODEWITHSUNDEEP
javascriptjqueryhtml
zomboble
zomboble

Reputation: 833

Prevent jquery slider being clicked a hundred times = 100 animations

I am building my first simple accordian type thing (without any net tuts), the js I have is this:

jQuery(document).ready(function($){

    $('#one').css("height", "25");
    $('#dtwo').css("height", "25"); 
    $('#three').css("height", "25");   
        $('#one').click(function() {
          if ($('#one').hasClass("extended")) {
            $('#one').animate({height: '25px'},500);
            $('#one').removeClass("extended");
            $('#a1').animate({opacity: '1'},500);
          } else {
            $('#one').animate({height: '120px'},500);
            $('#one').addClass("extended");
            $('#a1').animate({opacity: '0'},300);
          }
    });
});

Which works fine.

However you can click it like 200 times and it will do it 200 times, how can I prevent this?

Upvotes: 0

Views: 65

Answers (2)

TheZuck
TheZuck

Reputation: 3621

Try something like the following (not tested, but you get the general idea):

if ($('#one').hasClass("extended")) {
        if ($('#one').data("inProgress")) return;
        $('#one').data("inProgress", true);
        $('#one').animate({height: '25px'},500);
        $('#one').removeClass("extended");
        $('#a1').animate({opacity: '1'},500);
        $('#one').data("inProgress", false);
      } else {
        if ($('#one').data("inProgress")) return;
        $('#one').data("inProgress", true);
        $('#one').animate({height: '120px'},500);
        $('#one').addClass("extended");
        $('#a1').animate({opacity: '0'},300);
        $('#one').data("inProgress", false);
      }

Upvotes: 0

Johan
Johan

Reputation: 35194

If youre talking about the animation queuing up, you could use the stop() method. Something like this:

$('#a1').stop(true).animate({opacity: '1'},500);

Passing true as the first argument will clear the queue.

clearQueue A Boolean indicating whether to remove queued animation as well. Defaults to false.

If you are experiencing trobule with the animation stopping half way due to the clearQueue bool you can try using stop(true, true) instead.

jumpToEnd A Boolean indicating whether to complete the current animation immediately. Defaults to false.

Upvotes: 3

Related Questions