jQuery事件触发器;关于动画的回调和定时

Question

也许我的问题偏离了本身的简单性: 给定I .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
    });
},