禁用直到动画完成
我需要禁用整个脚本，直到动画完成，所以它不会导致它搞乱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 }); } }); }); 在启动动画时设置变量。 在动画完成时取消设置变量（即，我们现在有办法检测是否有动画正在进行中）。
每次调用该函数时，首先检查变量是否已设置，如果是，则不要继续（ 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 }); } }); });
您可以使用:animated选择器检查它是否已经动画第一件事然后跳出来，如下所示：
$('#prev').click(function() { var active = imglist.filter(':visible'); if(active.is(":animated")) return; ///rest of click handler... });
.animate() 支持回调 。 你可以在那里插入你的整个代码：
$(selector).animate( { /* options */ }, 2000, function(){ /* your code here */ } );
停止function将为你完成工作，看看这个$（“＃hidden_content”）。stop（）。animate（{height：“337px”，}）;