Question

我有一个复选框，当检查div弹出一条消息时，如果取消选中该复选框，则会弹出另一个div，弹出另一条消息。我得到了这个工作得体，但当你连续几次点击复选框时，它会混淆并且消息无法正确显示。任何想法如何使这项工作更好？（我是jquery部门的noOb所以任何帮助都绝对值得赞赏）。非常感谢！

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

我能够通过稍微简化动画来实现这一点（DEMO）

我刚刚改变了

    if (this.checked) {
        $(".message1").fadeIn("fast").fadeOut(4000);
        $(".message2").hide();
    } else {
        $(".message1").hide();
        $(".message2").fadeIn("fast").fadeOut(4000);
    }

到

    if (this.checked) {
        $(".message1").stop().show().fadeOut(4000);
        $(".message2").stop().hide();
    } else {
        $(".message1").stop().hide();
        $(".message2").stop().show().fadeOut(4000);
    }

另一方面，我认为你应该清除类和ID之间的区别。类适用于对象组，而ID引用单个对象。请查看This Link以查看正确的方法。请注意我最初如何通过CSS隐藏消息项而不是JS。

Answer 2

你需要停止当前的动画，你还应该传入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秒的动画：如果多次按下按钮，动画队列会很快变长。

您可以在此处详细了解stop命令： http://api.jquery.com/stop/

jQuery隐藏/显示复选框消息

2 个答案: