Help me improve this effect
I have simple script that loads an image. I've used fadeOut to hide the current image, and the call back function to load the next image after the first has finished fading away.
My problem is that clicking quickly across the links, faster than the images fade and load and fade in, often ends with the wrong image displayed. What's best practice for something like this, how can be make sure the last image clicked is the image that loads?
- $('#icons a').click(function(event){
- event.preventDefault();
- var img_src = $(this).attr('href');
- $('#images img').fadeOut(1000, function(){
- $(this).attr({src:img_src});
- $(this).fadeIn(1000);
- });
- });