如何确保.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

API：.stophttp://api.jquery.com/stop/

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

像@ahren提到你可以使用一个简单condtitional检查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 
});