Block event trigger on element while function executes

I'm trying to build a slideshow using jquery. The animation for the next image to rotate takes 1 second and the slider also has next and prev controls. Is it possible 开发者_如何学Cto block the next and prev control to fire while the animation is ongoing?

Use a global variable (e.g. var animating = false) to indicate the status of animation.

Set it to true when animation begins, and set it to false when animation ends (in the callback function).

In the prev and next functions, just check animating. If it is true, do nothing except return.

Without knowing your code here's a basic approach:

Register events for beginslide and endslide and set a variable slideInProgress to true and false respectively. Have your prev and next controls check if a slide is in progress and disallow if slideInProgress is true.

http://jsfiddle.net/R3aJS/ - working fiddle, you can hide unhide the controls through calling the animate functions on the image elements as and when. I guess that I was bored and wanted to expand on viclm answer :)

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

        var direction=0;
        $("img").hide();
        $('.direction').click(function() {
            if ($(this).attr('id') == -1) {
                if (direction != 0) {
                    direction --;
                }
                runAnimation($("img:eq("+direction+")"));
            } else {
                if (direction == $("img").length-1) {
                    direction = 0; //go back to the start why not
                } else {
                    direction ++;            }
                runAnimation($("img:eq("+direction+")"));
            }    
        });

    });

    function runAnimation (something) {
        $('.direction').hide();
        $(something).toggle();
         $(something).animate({
            opacity: 0.25,
            left: '+=50',
            height: 'toggle'
          }, 2000, function() {
            $('.direction').show();
          });
    }

<div class="gallery">
    <img width="150px" height="150px" src="http://survivalgaming.co.uk/images/star1.jpg"/>
    <img width="150px" height="150px" src="http://images.pictureshunt.com/pics/s/star-2192.jpg"/>
    <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/commons/9/97/Esperanto_star.png"/>
</div>
<span class="direction" id="-1">Prev</span> <span class="direction" id="1">Next</span>