3

現在、クライアント側でツイートを表示および非表示にしようとしていますが、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()
  • div.tweet呼び出されたときにすぐに表示するのではなく、要素をフェードイン（Webkitブラウザーの場合）または展開（mozブラウザーの場合）し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 に答える