禁用，直到动画完成

Question

我需要禁用这整个脚本，直到动画完成，所以它不会导致它搞砸了CSS。

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

有人告诉我，我需要使用旗语或mutux变量，但我无法找到他们的任何信息。

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

Answer 1

设置当动画initated的变量。动画完成时取消设置变量（即，我们现在可以检测是否有动画正在进行）。

每次调用该函数时，首先检查该变量是否已设置，如果是，则不要继续（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 
        }); 
      } 
     }); 
}); 

Answer 2

你可以只检查它是否使用:animated selector然后跳将出来，这样既动画第一件事：

$('#prev').click(function() { 
    var active = imglist.filter(':visible'); 
    if(active.is(":animated")) return; 
    ///rest of click handler... 
}); 

Answer 3

.animate()supports callbacks。你可以插入你的整个代码有：

$(selector).animate(
    { 
     /* options */ 
    }, 
    2000, 
    function(){ 
     /* your code here */ 
    } 
); 

Answer 4

停止功能将做的工作给你，看看这个 $（“＃hidden_​​content”）停止（）动画（{ 高度。“ 337px“， }）;