禁用直到动画完成

Question

我需要禁用整个脚本,直到动画完成,所以它不会导致它搞乱css.

例如:http://jsfiddle.net/qspSU/

我被告知我需要使用信号量或mutux变量,但我找不到任何关于它们的信息.

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

您可以检查它是否已经使用:animated选择器首先动画,然后跳出来,如下所示:

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