javascript - 为什么 jQuery 的 show() 和 hide() 方法会触发淡入淡出？

Question

我现在正在尝试在客户端显示和隐藏推文，但 jQuery 正在折叠 hide() 上的元素并在 show() 上淡入淡出>.

相关的 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() 时立即隐藏它。
• 淡入(在 webkit 浏览器中)或展开(在 moz 浏览器中)div.tweet 元素，而不是在调用 show() 时立即显示它。<

我已经尝试了 jQuery v1.7.2 和 v.1.8.2，以及不同的浏览器，但都产生了相同的效果。

有谁知道为什么会这样？

您可以在 http://grahamswan.com/clients/inovia 查看一个实例如果有帮助的话。

Answer 1

您使用的方法签名 (.hide( duration [, callback] )) 用于动画隐藏。立即隐藏的签名很简单 $("div.tweet").hide(); 要立即隐藏元素，您可以在持续时间内传递 0 参数就在你的回调参数之前。

更好的是，只需在调用 $("div.tweet").hide(); 后立即调用该函数。你真的不需要回调；隐藏 Action 是同步的。

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