2012-11-13 71 views
3

我試圖在客戶端顯示和隱藏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看到一個實例。

回答

7

您正在使用的方法簽名(.hide(duration [, callback]))用於動畫隱藏。立即隱藏的簽名只是$("div.tweet").hide();要立即隱藏元素,您可以在回調參數之前傳遞0的參數。

更好的是,只需調用$("div.tweet").hide();後調用該功能即可。你並不需要回調;隱藏動作是同步的。

$("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"); 
    })(); 
+0

好* *這是一個愚蠢的錯誤。謝謝你的幫助!我也意識到元素消退的原因是因爲我在頁面加載時爲它們分配了關鍵幀動畫。所有工作都按預期工作! –

1

您需要更改隱藏和顯示的持續時間。

$("div.tweet").hide(0, function() ... 

$("div.tweet").show(0, function() ... 

Example Fiddle