javascript - 如何管理 Jquery 切换淡入淡出动画的排队？

Question

问题

如何防止 jquery 切换函数在上一个切换动画完成之前运行？

我有一个简单的脚本来根据是否选中复选框来显示或隐藏数据。

JQUERY

$('.a').hide();
$('#CB').change(function () {
    if ($(this).is(':checked')) {
        $('.b').fadeOut(100, function () {
            $('.a').fadeIn();
        });
    } else {
        $('.a').fadeOut(100, function () {
            $('.b').fadeIn();
        });
    }
});

问题

当事件连续触发时，两个元素(在本例中为 .a 和 .b)一起变得可见。我认为这是因为在再次触发该函数之前之前的请求尚未完成。

CLICK FOR DEMO

Answer 1

http://jsfiddle.net/keypaul/PbS33/5/

$('.a').hide();
$('#CB').change(function () {

    if ($(this).is(":checked")) {
        $('.b').stop().fadeOut(100, function () {
            $('.a').stop().fadeIn();
        });
    } else {
        $('.a').stop().fadeOut(100, function () {
            $('.b').stop().fadeIn();
        });
    }
});

使用 jquery stop()

http://api.jquery.com/stop/