Question

I am using JQuery-UI. I want to start a new effect before the current one has finished. Is it possible?

Currently, I’m using something like this code:

    div1.hide({
        duration: 1000,
        easing: 'easeOutQuint',
        effect: 'drop',
        direction : 'up'
    });
    div1.promise().done(function(){
        div2.show();
    });

Thank you!

Edit: I ‘d like to avoid timers, if possible.

Answer 1

You can do it simply by using setTimeout():

div1.hide({
    duration: 1000,
    easing: 'easeOutQuint',
    effect: 'drop',
    direction : 'up'
});
setTimeout(function(){
    div2.show();
}, 900);

The above will effectively start div2.show() aproximately 100 miliseconds before the duration of div1.hide() ends (in other words: 900 miliseconds after the 1000-miliseconds animation starts).