Question

我正试图在客户端显示和隐藏推文，但jQuery正在折叠hide()上的元素并将其淡入show()。

Relevent 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();后立即调用该功能。你真的不需要回调;隐藏动作是同步的。

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

Answer 2

您需要更改隐藏和显示的持续时间。

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

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

Example Fiddle

为什么jQuery的show（）和hide（）方法会触发淡入淡出？

2 个答案: