Question

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

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

});

当用户点击div1_button时，先前选择的div0淡出并且div1淡入。如果用户点击疯狂并在div1完成淡入之前点击div2然后div2开始淡入并最终div1淡出，但它们堆叠在彼此顶部直到div1完成渐弱然后消失。如何停止.click（）事件，直到单击的div完成淡入。

Answer 1

像

这样的东西

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

});

但您可能需要对细节进行一些实验

Answer 2

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

这里：一个例子

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

Answer 3

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

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

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

});

虽然这不是你要求的，但这绝对是我要做的。

Answer 4

难道你不认为停止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();
      });
    }
});

或类似的东西

Answer 5

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

Answer 6

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

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

Answer 7

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

停止.click（）监听器，直到fQuery中的fadeIn（）完成

7 个答案: