3

我现在正试图在客户端显示和隐藏推文，但 jQuery 正在折叠元素 onhide()并将其淡入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看到一个实时示例。

4

2 回答 2

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");
  })();
于 2012-11-13T19:42:11.670 回答
1

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

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

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

示例小提琴

于 2012-11-13T19:44:36.903 回答