Question

我有两个div，当点击fadeOut内容和fadeIn新内容时。代码工作正常，直到您反复单击两个div非常频繁，这导致两个函数触发，内容加载到应该淡出的先前内容下面。

我想知道是否可以禁用另一个div，直到上一个功能完成才能触发，反之亦然。

$('#div1').click(function(event){
    event.preventDefault();
    $('#lastWeek').fadeOut(function(){
        $('#thisWeek').fadeIn();
    });
});

$('#div2').click(function(event){
    event.preventDefault();
    $('#thisWeek').fadeOut(function(){
        $('#lastWeek').fadeIn();
    });
});

对此的任何帮助将非常感激：）

Answer 1

如果你不想太复杂化，这是你需要的jQuery行为的唯一变化，最简单的是引入一个状态变量，两个事件处理程序都可以根据需要进行检查和修改：

var whoIsAnimating = null;

$('#div1').click(function(event){
    event.preventDefault();
    if (whoIsAnimating != null) { // or != 'div1', or == 'div2', take your pick
        return;
    }
    whoIsAnimating = 'div1';
    $('#lastWeek').fadeOut(function(){
        $('#thisWeek').fadeIn(function() {
            whoIsAnimating = null;
        });
    });
});

$('#div2').click(function(event){
    event.preventDefault();
    if (whoIsAnimating != null) { // same here, depends on what you want
        return;
    }
    whoIsAnimating = 'div2';
    $('#thisWeek').fadeOut(function(){
        $('#lastWeek').fadeIn(function() {
            whoIsAnimating = null;
        });
    });
});

Answer 2

通常，当影响该对象的动画中间发生某些事情时，您会停止动画并告诉它跳转到完成状态。这可以防止两个交互同时运行，但仍然为用户提供所需的最终状态。

这与您要求的完全不同（如果仍然动画，您要求忽略用户的点击），但通常是一种更好的方法，这就是为什么我提供这种替代解决方案。

您可以使用jQuery .stop(true, true)方法。在您的代码中，您可以像这样添加：

$('#div1').click(function(event){
    event.preventDefault();
    $('#thisWeek').stop(true, true);
    $('#lastWeek').stop(true, true).fadeOut(function(){
        $('#thisWeek').stop(true, true).fadeIn();
    });
});

$('#div2').click(function(event){
    event.preventDefault();
    $('#lastWeek').stop(true, true);
    $('#thisWeek').stop(true, true).fadeOut(function(){
        $('#lastWeek').stop(true, true).fadeIn();
    });
});

因此，在您想要在对象上开始新动画时，.stop(true, true)将清除所有其他动画并跳转到最终状态，然后再开始下一个动画。这将阻止两个动画（旧的，尚未完成的和新的动画）在某个时间运行。

fadeIn和fadeOut没有足够快地完成

2 个答案: