jQuery 隐藏/显示复选框消息

Question

我有一个复选框，当检查一个 div 时会弹出一条消息，如果取消选中该复选框，则会弹出另一个 div 并显示另一条消息。我让它正常工作，但是当您连续单击该复选框几次时，它会变得困惑并且消息无法正确显示。有什么想法可以让这项工作变得更好吗？ (我是 jquery 部门的菜鸟，所以我们非常感谢任何帮助)。非常感谢!

Check it out!

HTML:

<input type="checkbox" name="chkWishList" id="chkWishList" />Checkbox Label<br />
<div class="message1"><span>Success<small></small></span></div>
<div class="message2"><span>Removed<small></small></span></div>

jQuery:

$(function() {
    $(".message1").css("display", "none");
    $(".message2").css("display", "none");
    $("#chkWishList").click(function() {
        if (this.checked) {
            $(".message1").fadeIn("fast").fadeOut(4000);
            $(".message2").hide();
        }
        else {
            $(".message1").hide();
            $(".message2").fadeIn("fast").fadeOut(4000);
        }

    });
});

Answer 1

需要停止当前的动画，还应该传入clearQueue和jumpToEnd参数

$(function() {
    $(".message1").css("display", "none");
    $(".message2").css("display", "none");
    $("#chkWishList").click(function() {
        if (this.checked) {
            $(".message1").stop(true,true).fadeIn("fast").fadeOut(4000);
            $(".message2").hide();
        }
        else {
            $(".message1").stop(true,true).hide();
            $(".message2").stop(true,true).fadeIn("fast").fadeOut(4000);
        }

    });
});

在这里摆弄:http://jsfiddle.net/thebeebs/LwNHd/8/

您的代码的问题是 jQuery 正在对动画进行排队，因为您有一个 4 秒的动画:如果多次按下按钮，动画队列会很快变长。

您可以在此处了解有关停止命令的更多信息: http://api.jquery.com/stop/