Disable until animation is complete

Question

I need to disable this whole script until the animation is complete, so it will not cause it to corrupt css.

Example: http://jsfiddle.net/qspSU/

I was told that I need to use a semaphore or mutux variable, but I can not find any information on them.

JQuery

var speed = 'slow'; /* Change this to 5000 to see the movement more clearly */
var imglist = $("#center-photo img");
var listsize = imglist.size();
imglist.filter(':first').show();

$("#total").html(listsize);

$('#prev').click(function() {
    var active = imglist.filter(':visible');
    var prev = active.prev();

    if (prev.size() == 0) {
        prev = imglist.filter(':last');
    }

    var pos = active.position();

    var curid = $("#outof").html();
    if(curid == 1) {
        $("#outof").html(listsize);
    }else{
        $("#outof").html(curid - 1);
    }

    //Move current image out
    active.animate(
        {
            left: (pos.left + 250),
            opacity: 'hide'
        },
        {
            duration: speed,
            complete: function() {
                // Display next one and move in
                prev.css('opacity', 0).show().css('left', (pos.left - 250) + "px");
                prev.animate(
                    {
                        left: pos.left,
                        opacity: 1
                    }, {
                        duration: speed
                    });
            }
        });
});

$('#next').click(function() {
    var active = imglist.filter(':visible');
    var next = active.next();

    if (next.size() == 0) {
        next = imglist.filter(':first');
    }

    var pos = active.position();

    var curid = $("#outof").html();
    if(curid == 5) {
        $("#outof").html("1");
    }else{
        var newValue = parseInt(curid) + 1;
        $("#outof").html(newValue);
    }

    //Move current image out
    active.animate(
        {
            left: (pos.left - 250),
            opacity: 'hide'
        },
        {
            duration: speed,
            complete: function() {
                // Display next one and move in
                next.css('opacity', 0).show().css('left', (pos.left + 250) + "px");
                next.animate(
                    {
                        left: pos.left,
                        opacity: 1
                    }, {
                        duration: speed
                    });
            }
        });
});

Answer 1

Set the variable when starting the animation. Free the variable when the animation is complete (i.e. now we have a way to determine if the animation is in progress).

Each time you call a function, first check to see if the variable is set, and if there is one, do not continue ( return).

var speed = 'slow'; /* Change this to 5000 to see the movement more clearly */
var imglist = $("#center-photo img");
var inProgress = false; // Variable to check
var listsize = imglist.size();
imglist.filter(':first').show();

$("#total").html(listsize);

$('#prev').click(function() {
    // If already in progress, cancel, else show in progress
    if (inProgress) {
        return;
    } else {
        inProgress = true;
    }

    var active = imglist.filter(':visible');
    var prev = active.prev();

    if (prev.size() == 0) {
        prev = imglist.filter(':last');
    }

    var pos = active.position();

    var curid = $("#outof").html();
    if(curid == 1) {
        $("#outof").html(listsize);
    }else{
        $("#outof").html(curid - 1);
    }

    //Move current image out
    active.animate(
        {
            left: (pos.left + 250),
            opacity: 'hide'
        },
        {
            duration: speed,
            complete: function() {
                // reset variable
                inProgress = false;

                // Display next one and move in
                prev.css('opacity', 0).show().css('left', (pos.left - 250) + "px");
                prev.animate(
                    {
                        left: pos.left,
                        opacity: 1
                    }, {
                        duration: speed
                    });
            }
        });
});

$('#next').click(function() {
    // If already in progress, cancel, else show in progress
    if (inProgress) {
        return;
    } else {
        inProgress = true;
    }

    var active = imglist.filter(':visible');
    var next = active.next();

    if (next.size() == 0) {
        next = imglist.filter(':first');
    }

    var pos = active.position();

    var curid = $("#outof").html();
    if(curid == 5) {
        $("#outof").html("1");
    }else{
        var newValue = parseInt(curid) + 1;
        $("#outof").html(newValue);
    }

    //Move current image out
    active.animate(
        {
            left: (pos.left - 250),
            opacity: 'hide'
        },
        {
            duration: speed,
            complete: function() { 
                // reset
                inProgress = false;

                // Display next one and move in
                next.css('opacity', 0).show().css('left', (pos.left + 250) + "px");
                next.animate(
                    {
                        left: pos.left,
                        opacity: 1
                    }, {
                        duration: speed
                    });
            }
        });
});

Answer 2

, :animated, , :

$('#prev').click(function() {
  var active = imglist.filter(':visible');
  if(active.is(":animated")) return;
  ///rest of click handler...
});

Answer 3

.animate() supports callbacks . You can connect all your code:

$(selector).animate(
    { 
        /* options */ 
    }, 
    2000, 
    function(){ 
        /* your code here */ 
    }
);

Answer 4

The Stop function will do the job for you, look at it $ ("# Hidden_content"). Stop(). Animate ({height: "337px",});