jQuery事件觸發器;回調和定時相對於動畫

也許我的問題，從自身的簡單偏離：鑑於我.trigger()一個事件，我怎麼能確保代碼之後說.trigger()不會執行，直到整個事件處理函數已完成，包括其中的所有動畫，延遲等等？jQuery事件觸發器;回調和定時相對於動畫

我希望我在這裏失去了一些東西;我正在設置一系列自定義事件的用戶界面。其中一些事件實際上只是其他事件的集合;例如：

// ... 
'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;兩個動畫都是同時發生的，而不是按照邏輯順序。

來源

2011-09-15 Dan

不知道我是否理解你的問題，但這是否合理？

您可以傳遞另一個函數在動畫完成後運行。

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

來源

2011-09-15 05:56:38 wesbos

謝謝@Wes - 也許，我會與更新一起測試;檢查所述更新的問題。 – Dan

jQuery事件觸發器;回調和定時相對於動畫

回答

相關問題