jQuery事件觸發器； 關於動畫的回調和時間安排

Question

也許我的問題偏離了它本身的簡單性： 給定我.trigger()一個事件，我如何確保在整個事件處理函數完成（包括所有動畫，延遲等.trigger()之前，執行上述.trigger()代碼不會執行等。

---

我希望我在這里錯過了一些東西。 我正在使用一系列自定義事件設置UI。 有些事件實際上只是其他事件的集合。 例如：

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

給定cb-ui.hide事件中有一個動畫，如.fadeOut(1500) ，（ 在我的測試中 ）似乎剩余的// more stuff for close沒有等待觸發事件中的動畫完成。 我在想（ 參考文檔之前 ） .trigger()可能有一個可選的回調參數，就像動畫方法一樣：

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

但這似乎並非如此。 由於事件觸發器沒有被阻止（ 或至少看起來沒有 ），我該怎么做才能強制實現所需的功能，同時又與我一直在構建的事件處理程序/觸發器實現保持一致？

---

進一步來說：

$('[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
    });
},