並行jQuery效果

Question

我想並行執行兩個效果。一個jQuery UI「傳輸」動畫和另一個元素上的「淡入」。他們應該同時開始和結束。

我迄今爲止代碼：

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

據我所知，這兩個影響一個接着一個。是否可以實現並行效果執行？

Answer 1

您在效果的「回調」中使用了fadeIn函數。回調僅在動畫完成後觸發/運行。這應該可以幫助你了..

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

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

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

}); 

Answer 2

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

Answer 3

你可以使用animate 2個或多個並行FX。

Answer 4

兩個並行運行，即這兩個動畫同時使用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}); 
});