在动画制作完成之前禁用 [英] Disable until animation complete

问题描述

我需要禁用整个脚本，直到动画完成，这样才不会使CSS混乱.

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

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

有人告诉我我需要使用信号量或mutux变量，但找不到任何有关它们的信息.

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
                    });
            }
        });
});

推荐答案

在启动动画时设置变量.在动画制作完成后取消设置变量(即，我们现在可以检测是否正在制作动画).

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).

每次调用该函数时，首先检查变量是否已设置，如果已设置，则不要继续(return).

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
                    });
            }
        });
});

这篇关于在动画制作完成之前禁用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！