Question

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?

Answer 1

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.