jQueryイベントトリガー;アニメーション

Question

に関して、コールバックとタイミングおそらく、私の質問は、それ自体の単純さから逸脱：I .trigger()イベントを考えると、どのように私はそのコード次のことを確認することができます全体イベントハンドラ関数が完了するまで.trigger()が実行されませんと述べましたすべてのアニメーション、遅延などを含んでいますか？

---

は、私はここで何かが欠けてい願っています。私はカスタムイベントの束でUIを設定しています。イベントのいくつかは実際には他のイベントの集合体です。例えば：アニメーションがcb-ui.hideイベントであり考える

// ... 
'cb-ui.hide': function(event){ 
    // do stuff to hide 
}, 
'cb-ui.close': function(event){ 
    $(this).trigger('cb-ui.hide'); 
    // more stuff for close 
}, 
// ... 

は、.fadeOut(1500)のように、残りの// more stuff for closeは、トリガイベントに完了するためにアニメーションを待たないことを（私のテストで）が表示されます。

$(this).trigger('cb-ui.hide', function(event){ 
    // more stuff for close 
}); 

しかし、これはケースのように表示されません：私は、.trigger()の可能性が高いアニメーション法のような多くのオプションのコールバックの引数を持っているであろうと（ドキュメントを参照すると、前を）考えていました。イベントトリガーはブロックされていないため（、または少なくともではないようです）、私が構築しているイベントハンドラー/トリガーの実装を維持しながら、目的の機能を強制するにはどうすればよいですか？

具体的に

---

：

$('[data-cb-ui-class="window"]').live({ 
    'cb-ui.hide': function(event){ 
     $(this).find('[data-cb-ui-class="content"]').animate({ 
      opacity: 0 
     }, 1000); 
    }, 
    'cb-ui.show': function(event){ 
     $(this).find('[data-cb-ui-class="content"]').animate({ 
      opacity: 1 
     }, 1000); 
    } 
    'cb-ui.close': function(event){ 
     $(this).trigger('cb-ui.hide'); 
     $(this).find('[data-cb-ui-class="content"]').animate({ 
      height: 'hide' // happening simultaneously to the animation of 'cb-ui.hide' 
          // expected to happen in tandem; one after the other 
     }, 1000); 
    }, 
    'cb-ui.update': function(event, html){ 
     // none of this is working as expected; the expected being, the 'cb-ui.hide' 
     // event is triggered (thus fading the [...-content] out) the HTML content is 
     // updated, then the [...-content] is faded back in from 'cb-ui.show' 
     // instead its just a mess that results in it fading out 
     $(this).trigger('cb-ui.hide'); 
     $(this).find('[data-cb-ui-class="content"]').html(html); 
     $(this).trigger('cb-ui-show'); 
    } 
}); 

$('#foo').trigger('cb-ui.update', ['<p>Hello world!</p>']); // #foo is bound 

この例のアニメーションは〜2秒かかるが、1を取っているように見えるはずです。両方のアニメーションが論理的順序ではなく、互いに同時に発生しています。

Answer 1

あなたの質問が正しいかどうかわかりませんが、これは意味がありますか？

アニメーションが完了した後に実行する別の関数を渡すことができます。

'cb-ui.hide': function(event, callback){ 
    $('.lol').fadeTo(0,function() { 
     // fire callback 
    }) 
}, 
'cb-ui.close': function(event){ 
    cb-ui.hide(e,function() { 
     // other stuff 
    }); 
},