javascript - 如何确保 .animate 在再次执行之前完成

Question

我有一些滑动图像，我正在使用 .animate 移动。当我单击箭头再次前进时，幻灯片都搞砸了。

这是正在发生的事情的链接。http://leadgenixhosting.com/~intmed/

这是我到目前为止的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();
        }
    );
}
);

Answer 1

接口：.stop http ://api.jquery.com/stop/

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

就像@ahren 提到的那样，is(":animated")如果您热衷于阅读这些内容，可以使用简单的条件检查：

http://api.jquery.com/animated-selector/

你会在这里找到实现：jquery is(":visible") and is(":animated") bug during animation？

Answer 2

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