[英]jQuery event trigger; callback and timing with respect to animations
也许我的问题偏离了它本身的简单性: 给定我.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; 两种动画是同时发生的,而不是按照逻辑顺序发生的。
不知道我是否理解您的问题正确,但这有意义吗?
动画完成后,您只需传递另一个要运行的功能即可。
'cb-ui.hide': function(event, callback){
$('.lol').fadeTo(0,function() {
// fire callback
})
},
'cb-ui.close': function(event){
cb-ui.hide(e,function() {
// other stuff
});
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.