Question

I need to disable this entire script until the animation is complete so it doesn’t cause it to mess up the css.

Ex: http://jsfiddle.net/qspSU/

I was told I need to use a semaphore or mutux variable but I can’t 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 a variable when the animation is initated. Unset the variable when the animation is complete (i.e, we now have a way to detect if there is an animation in progress).

Each time you call the function, first check to see if the variable is set, and if it is, don’t 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
                    });
            }
        });
});