Question

I want to execute two effects in parallel. A jQuery UI “transfer” animation and a “fadeIn” on another element. They should begin and end at the same time.

My code so far:

    $('#foo').hover(function() {
        $(this).effect("transfer", {
            to: "#transition-target",
            className: "ui-effects-transfer"
        }, 300, function() {
            $('#bar').fadeIn(300);
        });
    });

I understand that both effects are executed one after another. Is it possible to achieve parallel effect execution?

Answer 1

You had the fadeIn function in the “callback” of the effect. The callback is triggered/run only after the animation has finished. This should help you out..

$('#foo').hover(function() {

    $(this).effect("transfer", {
        to: "#transition-target",
        className: "ui-effects-transfer"
    }, 300);

    $('#bar').fadeIn(300);

});