淡入淡出同時發生頁

Question

我有一個jQuery動畫功能，淡入淡出兩個div的鼠標懸停/退出。

但是，我需要同時執行淡入和淡出 - 當前第一個div淡入，然後第二個div淡出 - 我需要兩個同時發生。當前代碼如下：

var showElements = function(){ 
    $('#hover-advanced').animate({opacity: "1.0"}, 300),$('#hover-standard').animate({opacity: "0.3"}, 300); 

} 

有沒有人知道這是可能的？

感謝

Answer 1

動畫（）函數有一個隊列的選擇......讓假有動畫看起來好像它們是同時進行 -

var showElements = function(){ 
    $('#hover-advanced').animate({opacity: "1.0"}, {duration: 300, queue: false}),$('#hover-standard').animate({opacity: "0.3"}, {duration: 300, queue: false}); 
} 

jQuery的動畫（）文檔 -

Answer 2

您的動畫做在同一時間運行。它們似乎只是一個接一個地發生，因爲我們對不透明度的看法與不透明度的值不是線性的。當其他元素已經開始褪色時，我們根本看不到該元素變得完全不透明。

如果使用更長的動畫時間，您會看到它們實際上是同時運行的。

你可以嘗試使用linear寬鬆，而不是默認swing寬鬆，看看它看起來更好：

$('#hover-advanced').animate({opacity: "1.0"}, 300, "linear"); 
$('#hover-standard').animate({opacity: "0"}, 300, "linear"); 

另一種選擇是不運行同時進行動畫。如果添加的延遲是可見的動畫，他們將似乎同時運行：

$('#hover-advanced').delay(100).animate({opacity: "1.0"}, 300); 
$('#hover-standard').animate({opacity: "0"}, 300);