停止。点击（）监听，直到淡入（）jQuery中

$('#div1_button').click(function() { 

    $('#div0').fadeOut(function(){   
     $('#div1').fadeIn();  
    }); 

});

当用户点击div1_button先前选定的DIV0淡出和DIV1淡入结束。如果用户点击进入疯狂和DIV1完成褪色之前点击DIV2然后div2开始淡入，最终div1淡出，但是它们叠加在一起，直到div1完成淡入然后淡出。我怎样才能直到点击DIV完成衰落停止。点击（）事件。停止。点击（）监听，直到淡入（）jQuery中

来源

2010-09-24 bmck

这么多好的答案我实际上是以.stop（）结束的，因为我觉得让用户得到他们所要求的内容会更好，而不必等待动画完成，然后再次请求。我知道这不是我要求的，但感谢所有回答的人！ – bmck 2010-09-24 15:36:33

谢谢，这实际上是一个很好的选择，考虑用户体验:) – Stewie 2010-09-24 15:45:31

您可以通过使用jQuery .stop（）函数停止动画。 http://api.jquery.com/stop/

$('#div1_button').click(function() { 

    $('#div0').stop(true, true).fadeOut(function(){   
     $('#div1').stop(true, true).fadeIn();  
    }); 

});

虽然这不是你要求什么，这绝对是我会做了。

来源

2010-09-24 15:01:48 Niv

不会等待动画完成是一个更好的主意？ – Stewie 2010-09-24 15:06:59

喜欢的东西

var div1_bclick_inprogress = false; 
$('#div1_button').click(function() { 
    if (!div1_bclick_inprogress) { 
     div1_bclick_inprogress = true; 
     $('#div0').fadeOut(function(){   
      $('#div1').fadeIn(function(){ 
       div1_bclick_inprogress = false; 
      });  
     }); 
    } 

});

，但你可能要实验一下与细节

来源

2010-09-24 14:58:54 einarmagnus

有没有必要做/设置/重置标志，jquery提供内部标志调用：动画..使用它将更清洁，它服务于相同的目的:) – Stewie 2010-09-24 15:10:10

好吧:)我从来没有使用jQuery，所以我不知道细节。我使用Prototype和Ext。 – einarmagnus 2010-09-24 15:13:44

噢好.. :)这里是链接供参考和进一步阅读：http://api.jquery.com/animated-selector/ – Stewie 2010-09-24 15:15:42

您可以创建一个外部布尔值，每个点击值在衰落之前检查。即

var noFading = true; 
$('#div1_button').click(function() { 
    if (noFading) { 
     noFading = false; 
     $('#div0').fadeOut(function(){   
      $('#div1').fadeIn(function() { noFading = true; });  
     }); 
    } 
});

来源

2010-09-24 14:59:40 Robert

使用jQuery.data来存储标志。首次点击后，设置标志，而忽视点击，直到标志是由褪色整理取消设置：

$('#div1_button').click(function() { 
    if ($('#div1').data('disableClick') === true) return false; 

    $('#div1').data('disableClick', true); 

    $('#div0').fadeOut(function(){   
     $('#div1').fadeIn(function() { 
      $('#div1').data('disableClick', false); 
     });  
    }); 
});

来源

2010-09-24 15:00:08 kevingessner

你不觉得最好是停止fadeIn/fadeOut并按用户要求改变方向吗？

在这种情况下

：

$('#div1_button').click(function() { 
    var state = $(this).data("state"); 
    $(this).data(state, !state); 

    var d0 = $("#div0").stop(), 
     d1 = $("#div1").stop(); 

    if (state) { 
     d0.fadeOut(function() {   
     d1.fadeIn();  
     }); 
    } else { 
     d0.fadeIn(function() { 
     d1.fadeOut(); 
     }); 
    } 
});

或像这样

来源

2010-09-24 15:02:02

用途：动画.. http://api.jquery.com/animated-selector/

这里：一个例子

$("#div1_button").click(function() { 
    if (!$(this).parent().children().is(':animated')) { 
      $('#div0').fadeOut(function(){   
       $('#div1').fadeIn();  
      }); 
    } 
    return false; 
});

来源

2010-09-24 15:02:57 Stewie

div1_click_handler = function() 
{ 
    $('#div1_button').unbind('click', div1_click_handler); 

    $('#div0').fadeOut('slow', function() 
    { 
     $('#div1').fadeIn('slow', function() 
     { 
      $('#div1_button').click(div1_click_handler);     
     }); 
    }); 
}); 

$('#div1_button').click(div1_click_handler);

来源

2010-09-24 15:08:20

+1不必要的神奇:) – einarmagnus 2010-09-24 15:16:24

停止。点击（）监听，直到淡入（）jQuery中

回答

相关问题