10

HTMLコード

<div id="foo">
    <h1>foo</h1>
    <p>Pellentesque habitant morbi tristique.</p>
</div>
<div id="bar">
    <h1>bar</h1>
</div>

jQuery コード

$('#bar').click(function () {
    $('#foo p').hide('slow').appendTo('#bar').show('slow');
})

期待される結果

#バークリック時

  1. p要素を隠す#foo
  2. pに追加#bar
  3. p現在の子であるshow#bar

実結果

  1. pに追加#bar
  2. p要素を隠す#foo
  3. p現在の子であるshow#bar

質問

  • jQueryチェーンでメソッドの実行順序を決定するものは何ですか?
  • 次の開始前に各イベントが確実に完了するようにするにはどうすればよいですか?
4

7 に答える 7

8

非表示や表示などの効果の後に何かを確実に実行するには、コールバックを使用します。 http://docs.jquery.com/Effects/show#speedcallback

たす：

ヴィンセントは正しい、処刑は実際には

  1. #foo の p 要素の非表示を開始します (ゆっくりと)
  2. p を #bar に追加します (簡単に)
  3. 現在 #bar の子である p を表示し始めます (ゆっくりと)

あなたが見たのは効果の結果でした

  1. p を #bar に追加 (実行)
  2. #foo の p 要素を非表示にする (COMPLETED)
  3. #bar の子になった p を表示 (COMPLETED)
于 2009-10-21T00:43:06.620 に答える
4

期待される結果は正しいです。観察された動作は、非同期で実行される hide('slow') の結果である可能性があります。したがって、次のアクションの実行中に実行されます。したがって、最初に #bar に p が追加されているように見えます。hide() をスローなしで試して、違いがあるかどうかを確認できます。

于 2009-10-21T00:41:33.587 に答える
3

次のステップを実行する前に、各アニメーションが完了するまで待ちたい場合は、ドキュメントに詳述されているアニメーション コールバックを使用します。

$('#bar').click(function () {
  $('#foo p').hide('slow', function(){
    $(this).appendTo('#bar').show('slow');
  });
});
于 2009-10-21T00:46:22.153 に答える
1

呼び出した順序で実行されていることを確認してください。おそらく非表示部分が開始され、1 秒後に他の要素に追加されますが、アニメーション部分はすでに開始されています。「低速」に設定しているため、1 ミリ秒以上かかります。そして、不透明度が 1 から 0 にジャンプし、ミリ秒単位で 1 から .9 から .8 に変化します。

$.fn.hide = function() { alert('hiding'); return this; };
$.fn.appendTo = function() { alert('appending To') }
$('body').hide().appendTo('html')
于 2009-10-21T00:42:38.813 に答える
1

show()およびhide()実際にはアニメーション効果ですが、引数が渡されない場合、「瞬間的な」持続時間が使用されます。ただし、アニメーションとして実装されているため、関数チェーンと同期して実行されません。したがって、実際に使用する必要があるのは、hide()呼び出しからコールバックを呼び出して、コールバック関数をトリガーしappend()、次にを呼び出すことshow()です。

http://docs.jquery.com/Effects/show

http://docs.jquery.com/Effects/hide

于 2009-10-21T00:43:11.940 に答える
1

非表示は非同期です。完了するのを待ちたい場合は、その後に実行するすべてのコードを、パラメータとして hide に渡すコールバック関数に入れる必要があります。

于 2009-10-21T00:45:18.777 に答える
0

「Sixten Otto」が言ったように、show hide の後に実行される他のメソッドをキューに入れたい場合は、コールバックを使用する必要があります。show hide のアニメーションは、append メソッドの実行を待機しません。setInterval で別のスレッドを開始し、その間に他のコードが呼び出されます。したがって、得られた結果は予想外ではありません。

于 2009-10-21T02:04:06.533 に答える