我試圖在客戶端顯示和隱藏tweets,但jQuery正在摺疊hide()
上的元素並將其淡入show()
。爲什麼jQuery的show()和hide()方法觸發淡入?
培訓相關HTML:
<aside>
<div class="tweet-author">
<p class="name">Graham Swan</p>
<p class="position">Managing Partner</p>
</div>
<div class="tweet">
<blockquote>Just had the greatest cup of coffee ever!</blockquote>
<div class="clearfix">
<time>2 minutes ago <span>via</span> Twitter</time>
<a href="#">Hide Tweets</a>
</div>
</div>
</aside>
相關的JavaScript:
// Hide tweets when "Hide Tweets" link is clicked
$(document).on('click', 'div.tweet > div.clearfix > a', function(e) {
e.preventDefault();
$("div.tweet").hide(function() {
$("div.tweet-author > p.name").html("Show Recent Tweets");
$("div.tweet-author > p.position").html("By the iNovia Team");
$("aside").addClass("click-to-show-tweets");
});
});
// Show tweets when "Show Recent Tweets" link is clicked
$(document).on('click', 'aside.click-to-show-tweets', function(e) {
e.preventDefault();
$("div.tweet").show(function() {
$("div.tweet-author > p.name").html("Graham Swan");
$("div.tweet-author > p.position").html("Managing Partner");
$("aside").removeClass("click-to-show-tweets");
});
});
jQuery是執行以下操作:
- 立即摺疊的
div.tweet
元素,而不是隱藏它,當hide()
被稱爲。 - 在調用
show()
時,淡入(在webkit瀏覽器中)或擴展(在moz瀏覽器中)div.tweet
元素,而不是立即顯示它。
我已經嘗試了jQuery的v1.7.2和v.1.8.2,以及不同的瀏覽器,但都產生相同的效果。
有誰知道爲什麼會發生這種情況?
如果有幫助,你可以在http://grahamswan.com/clients/inovia看到一個實例。
好* *這是一個愚蠢的錯誤。謝謝你的幫助!我也意識到元素消退的原因是因爲我在頁面加載時爲它們分配了關鍵幀動畫。所有工作都按預期工作! –