jQuery隐藏/显示复选框消息

我有一个复选框，当检查一个div弹出一条消息，然后如果复选框未选中有另一个弹出另一个消息的div。我得到这个正常工作，但当你点击复选框在连续几次它会感到困惑和消息显示不正确。任何想法如何使这项工作更好？（我是jQuery部门的noOb，所以任何帮助都是绝对值得赞赏的）。非常感谢！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); 
     } 

    }); 
});

来源

2011-05-03 ComatoseDuck

发布您的代码，请 – 2011-05-03 19:51:14

我们能看到你的代码？它更容易帮助你改进它，而不必猜测你的代码是什么。 – Becuzz 2011-05-03 19:52:19

家伙的代码是在他的链接... – 2011-05-03 20:02:08

你需要停止当前的动画，你也应该通过在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/

来源

2011-05-03 20:19:46

不错，这件作品很有魅力，非常感谢！ – 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。

来源

2011-05-03 19:58:47 Dutchie432

感谢Dutchie，我不敢相信我没想到最初通过css而不是jQuery来隐藏消息。我注意到，如果你让邮件褪色了一下，然后单击复选框，重新检查邮件仍在褪色过程中 – ComatoseDuck 2011-05-03 20:50:17

jQuery隐藏/显示复选框消息

回答

相关问题