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

How can I make sure .animate has finished before performing again

本文关键字:执行 已完成 animate 何确保 确保      更新时间:2023-09-26

我有一些滑动图像,我正在使用.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();
        }
    );
}
);

API: .stop http://api.jquery.com/stop/

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

就像@ahren提到的,如果你热衷于阅读这些内容,你可以使用一个简单的条件检查is(":animated")

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

您将在这里找到实现:jquery is(":visible") 和 is(":animated") 在动画过程中出现错误?

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