jQuery隐藏/显示复选框消息
我有一个复选框,当检查一个div弹出一条消息,然后如果复选框未选中有另一个弹出另一个消息的div。我得到这个正常工作,但当你点击复选框在连续几次它会感到困惑和消息显示不正确。任何想法如何使这项工作更好? (我是jQuery部门的noOb,所以任何帮助都是绝对值得赞赏的)。非常感谢!jQuery隐藏/显示复选框消息
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);
}
});
});
你需要停止当前的动画,你也应该通过在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/
不错,这件作品很有魅力,非常感谢! – ComatoseDuck 2011-05-03 21:14:11
我能得到这个通过简化动画位(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引用单个对象。看看This Link看到正确的做法。请注意,我最初可以通过CSS隐藏消息项目,而不是JS。
感谢Dutchie,我不敢相信我没想到最初通过css而不是jQuery来隐藏消息。我注意到,如果你让邮件褪色了一下,然后单击复选框,重新检查邮件仍在褪色过程中 – ComatoseDuck 2011-05-03 20:50:17
发布您的代码,请 – 2011-05-03 19:51:14
我们能看到你的代码?它更容易帮助你改进它,而不必猜测你的代码是什么。 – Becuzz 2011-05-03 19:52:19
家伙的代码是在他的链接... – 2011-05-03 20:02:08