Параллельные эффекты jQuery

Question

Я хочу выполнить два эффекта параллельно. Пользовательский интерфейс jQuery «передает» анимацию и «fadeIn» для другого элемента. Они должны начинаться и заканчиваться одновременно.

Пока мой код:

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

Я понимаю, что оба эффекта выполняются один за другим. Возможно ли добиться параллельного эффекта выполнения?

Answer 1

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

Answer 2

У вас была функция fadeIn в «обратном вызове» эффекта. Обратный вызов запускается / запускается только после завершения анимации. Это должно помочь вам ..

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

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

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

});

Answer 3

Два запускают две анимации параллельно, т.е. одновременно используют queue : false и не помещают вторую анимацию в функцию обратного вызова первой, как это:

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

Answer 4

Вы можете сделать 2 или более параллельных эффектов, используя animate .