Question

我需要禁用整个脚本，直到动画完成，因此不会导致它搞乱css。

我被告知需要使用信号量或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 selector进行动画制作，然后跳出来，如下所示：

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

Answer 2

启动动画时设置变量。在动画完成时取消设置变量（即，我们现在有办法检测是否有正在进行的动画）。

每次调用该函数时，首先检查变量是否已设置，如果是，则不要继续（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 3

.animate() supports callbacks。您可以在其中插入整个代码：

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

Answer 4

停止功能将为您完成工作，请看这个 $（ “＃hidden_content”）。停止（）。动画（{ 身高：“337px”， }）;

禁用直到动画完成

4 个答案: