jQuery event trigger; callback and timing with respect to animations

Question

Perhaps my question deviates from the simplicity of itself: Given I .trigger() an event, how can I ensure that code following said .trigger() will not execute until the entire event handler function has completed, including all animations, delays, et al., therein?

---

I hope I'm missing something here; I'm setting up a UI with a bunch of custom events. Some of the events are really just aggregates of other events; for instance:

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

Given there is an animation in the cb-ui.hide event, like .fadeOut(1500) , it appears ( in my testing ) that the remaining // more stuff for close doesn't wait for the animation to complete in the triggered event. I was thinking ( previous to referencing the docs ) that .trigger() would likely have an optional callback argument much like the animation methods:

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

But this doesn't appear to be the case. Since event triggers are not blocking ( or don't appear to be at least ), what can I do to force the desired functionality, while keeping with the event handler/trigger implementation that I've been building off of?

---

More specifically:

$('[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

This example animation should take ~2 seconds, but appears to be taking 1; both animations are occurring simultaneous to each other, rather than in logical order.

Answer 1

Not sure if I understand your question right, but does this make sense?

You can just pass another function to be run after the animation is done.

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