Javascript 我如何确保在再次执行之前已完成动画制作

我有一些滑动图像，我正在移动。动画。当我再次点击箭头前进时，幻灯片被弄得一团糟

这里有一个链接到正在发生的事情

这是我到目前为止的js：

$(document).ready(
function(){

    $('#mast').hover(
        function(){
            $('#out-right').hide().attr('src','');
            $('#in-right').show().attr('src','http://leadgenixhosting.com/~intmed/wp-content/themes/imi/images/on_03.gif');
            $('#out-left').hide().attr('src','');
            $('#in-left').show().attr('src','http://leadgenixhosting.com/~intmed/wp-content/themes/imi/images/on_07.gif');
        },
        function(){
            $('#in-right').hide().attr('src','');
            $('#out-right').show().attr('src','http://leadgenixhosting.com/~intmed/wp-content/themes/imi/images/off_03.gif');
            $('#in-left').hide().attr('src','');
            $('#out-left').show().attr('src','http://leadgenixhosting.com/~intmed/wp-content/themes/imi/images/off_07.gif');
        }
    );

    /*Picture Setup
    -------------------------------------------------*/

    var gallery_images = [];
    var divs = ['one','two','three','four'];

    $('#image_container img').each(
        function(){
            gallery_images[gallery_images.length] = $(this).attr('src');
            $(this).hide();
        }
    );

    $('#'+divs[0]+'').css('background-image','url('+gallery_images[0]+')');

    var total_images = gallery_images.length;

    //Images

    var current = 0;

    //Divs

    var current_image = 0;
    var previous_image = divs.length - 1;
    var two_prev = divs.length - 2;
    var next = current_image + 1;

    /*Image Switch
    -------------------------------------------------*/

    function imageSwitch(){

        current++;
        current_image++;
        previous_image++;
        next++;
        two_prev++

        if(two_prev >= divs.length){
            two_prev = 0;   
        }

        if(current >= gallery_images.length){
            current = 0;    
        }

        if(previous_image >= divs.length){
            previous_image = 0; 
        }

        if(current_image >= divs.length){
            current_image = 0;
        }

        if(next >= divs.length){
            next = 0;
        }   

        $('#'+divs[current_image]+'').animate({left:'-=1020px'},{queue:false,duration:1000})
        $('#'+divs[current_image]+'').css('background-image','url('+gallery_images[current]+')');

        $('#'+divs[previous_image]+'').animate({left:'-=1020px'},{queue:false,duration:1000});

        $('#'+divs[next]+'').animate({left: '+=1020px', top: '-=10000px'}, 1000);

        $('#'+divs[two_prev]+'').animate({left: '+=1020px', top: '+=10000px'}, 1000);
    }

    function imageBack(){

        current--;
        current_image--;
        previous_image--;
        next--;
        two_prev--;

        if(two_prev < 0){
            two_prev = divs.length - 1; 
        }

        if(current < 0){
            current = divs.length - 1;  
        }

        if(previous_image < 0){
            previous_image = divs.length - 1;   
        }

        if(current_image < 0){
            current_image = divs.length - 1;
        }

        if(next < 0){
            next = divs.length - 1;
        }   

        $('#'+divs[current_image]+'').animate({left:'+=1020px'},{queue:false,duration:1000});
        $('#'+divs[current_image]+'').css('background-image','url('+gallery_images[current]+')');

        $('#'+divs[previous_image]+'').animate({left:'-=1020px'},{queue:false,duration:1000});

        $('#'+divs[next]+'').animate({left: '-=1020px', top: '+=10000px'}, 1000);

        $('#'+divs[two_prev]+'').animate({left:'-=1020px'},{queue:false,duration:1000});
    }

    /*Image Buttons
    ----------------------------------------*/

    $('#in-right').click(
        function(){
            imageSwitch();
        }
    );

    $('#in-left').click(
        function(){
            imageBack();
        }
    );
}
);

$（文档）。准备好了吗(
函数（）{
$（“#桅杆”）。悬停(
函数（）{
$（'#右外'）.hide（）.attr（'src'，''）；
$（'右'）.show（）.attr（'src'，'http://leadgenixhosting.com/~intmed/wp content/themes/imi/images/on_03.gif'）；
$（'#out left'）.hide（）.attr（'src'，''）；
$（'左'）.show（）.attr（'src'，'http://leadgenixhosting.com/~intmed/wp content/themes/imi/images/on_07.gif'）；
},
函数（）{
$（'右'）.hide（）.attr（'src'，''）；
$（'#右外'）.show（）.attr（'src'，'http://leadgenixhosting.com/~intmed/wp content/themes/imi/images/off_03.gif'）；
$（'左'）.hide（）.attr（'src'，''）；
$（'#out left'）.show（）.attr（'src'，'http://leadgenixhosting.com/~intmed/wp content/themes/imi/images/off_07.gif'）；
}
);
/*图片设置
-------------------------------------------------*/
var gallery_images=[]；
var divs=['1'、'2'、'3'、'4']；
$（“#图像_容器img”）。每个(
函数（）{
gallery_images[gallery_images.length]=$（this.attr（'src'）；
$（this.hide（）；
}
);
$（'#'+divs[0]+'）.css（'background-image'，'url（'+gallery_-images[0]+'））；
var total_images=画廊_images.length；
//图像
无功电流=0；
//Divs
var current_image=0；
var previous_image=divs.length-1；
var two_prev=divs.length-2；
var next=当前_图像+1；
/*图像开关
-------------------------------------------------*/
函数imageSwitch（）{
电流++；
当前_image++；
以前的_image++；
next++；
两周前++
如果（两个上一个>=分割长度）{
2_prev=0；
}
如果（当前>=画廊图片长度）{
电流=0；
}
如果（上一张图片>=divs.length）{
上一张图片=0；
}
如果（当前图像>=divs.length）{
当前_图像=0；
}
如果（下一步>=分段长度）{
next=0；
}   
$（'#'+divs[current_image]+''）.animate（{left:'-=1020px'}，{queue:false，duration:1000}）
$（“#”+divs[current_image]+'）.css（'background-image'，'url（'+gallery_images[current]+'）；
$（'#'+divs[previous_image]+''）.animate（{left:'-=1020px'}，{queue:false，duration:1000}）；
$（'#'+divs[next]+''）.animate（{left:'+=1020px'，top:'-=10000px'}，1000）；
$（'#'+divs[two_prev]+''）.animate（{left:'+=1020px'，top:'+=10000px'}，1000）；
}
函数imageBack（）{
当前--；
当前_图像--；
先前的_图像--；
下一个--；
两个上一个--；
如果（两个上一个<0）{
2_prev=divs.length-1；
}
如果（电流<0）{
电流=divs.length-1；
}
如果（上一张图像<0）{
上一张图片=divs.length-1；
}
如果（当前图像<0）{
当前图像=divs.length-1；
}
如果（下一个<0）{
next=divs.length-1；
}   
$（'#'+divs[current_image]+''）.animate（{left:'+=1020px'}，{queue:false，duration:1000}）；
$（“#”+divs[current_image]+'）.css（'background-image'，'url（'+gallery_images[current]+'）；
$（'#'+divs[previous_image]+''）.animate（{left:'-=1020px'}，{queue:false，duration:1000}）；
$（'#'+divs[next]+''）.animate（{left:'-=1020px'，top:'+=10000px'}，1000）；
$（'#'+divs[two_prev]+''）.animate（{left:'-=1020px'}，{queue:false，duration:1000}）；
}
/*图像按钮
----------------------------------------*/
$（“#在右侧”）。单击(
函数（）{
imageSwitch（）；
}
);
$（'左'）。单击(
函数（）{
imageBack（）；
}
);
}
);

API:

停止

停止匹配元素上当前正在运行的动画

如@ahren所述，如果您喜欢阅读以下内容，您可以使用一个简单的条件检查

is（“：animated”）

：

您将在此处找到实现：

API:

。停止

停止匹配元素上当前正在运行的动画

如@ahren所述，如果您喜欢阅读以下内容，您可以使用一个简单的条件检查

is（“：animated”）

：

---

---

您将在这里找到实现：

+1比我的答案更好！可能还值得一提的是，

。是（“：动画”）

@ahren SUp bruv！谢谢大家!<代码>：）哦，当然+1祝你好运，你会得到回报：）@Tats\u谢谢你的帮助！这很有帮助。@ahren也感谢你。非常有用，比我的答案好+1！可能还值得一提的是，

。是（“：动画”）

@ahren SUp bruv！谢谢大家!<代码>：）哦，当然+1祝你好运，你会得到回报：）@Tats\u谢谢你的帮助！这很有帮助。@ahren也感谢你。非常有用在这种情况下，回调是不合适的-1.为什么？可以在设置动画时指定布尔值，并在设置动画后使其为false。如果布尔值为true，则不会设置其他对象的动画。调用回调时，您可以在动画完成后执行其他操作。问题标题具有误导性…OP实际上希望中止当前动画，并在用户为如此琐碎的事情再次单击太多代码时转到下一个动画。一个简单的

.stop（）

就足够了，或者检查

.is（':animated'）

-同意了。书的标题是误导性的！（事实上，我首先得到的答案是回叫，但在重新阅读问题后将其删除）@nbrooks是的，我不明白他想要什么：）在这种情况下，回叫是不合适的-1.为什么？你可以做一个

$('#element').animate({..properties..}, time_interval, function() {
    // When here, you know that animate has finished
});