CODEWITHSUNDEEP
javascriptjqueryevents
Radu Dragomir
Radu Dragomir

Reputation: 660

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 to block the next and prev control to fire while the animation is ongoing?

Upvotes: 1

Views: 1099

Answers (3)

viclm
viclm

Reputation: 203

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.

Upvotes: 1

John
John

Reputation: 1319

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>

Upvotes: 0

Till
Till

Reputation: 3154

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.

Upvotes: 0

Related Questions