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隱藏/顯示覆選框消息

回答

相關問題