CODEWITHSUNDEEP
javascript
rajmoney
rajmoney

Reputation: 3

javascript click event queue

I made a simple gallery where when you click on a image thumb nail, it will show the larger image with fade in fade out effect with jquery.

$('#thumnail').click(function(){
  $('#piccontainer').fadeOut(function(){
      $('#piccontainer').html('<div> <img src="' + imgsource + '"  /> </div>');
  });

  $('#piccontainer').fadeIn();
});

but if i click on a 5 different thumbnails quickly, the large image will fade in fade out for all 5 images. How can I disable so that lets say i clicked on 5 thumbnails very quickly, it should only fadein the last 5th one. basicaly how can i stop the queue of the click events?

thanks for the help.

Upvotes: 0

Views: 1971

Answers (3)

Oriol
Oriol

Reputation: 12660

Add this condition at the top of the function:

if ($('#piccontainer').is(":animated")) {
  return false;
}

See Demo

Upvotes: 0

dhaval
dhaval

Reputation: 7659

You could use timeout like this to avoid multiple clicks. Again this is possible to avoid clicks for a small amount of time and not longer.

http://jsfiddle.net/dhavaln/Z7w84/

Upvotes: 0

Story Teller
Story Teller

Reputation: 427

Take a look at - http://api.jquery.com/queue/

Upvotes: 1

Related Questions