jQuery顏色動畫不能跨多個元素同步

我在使用jQuery同步顏色更改動畫時遇到問題。出於某種原因，按鈕元素內的字體顏色僅在每個其他顏色更改處理完畢後纔會更改。下面是代碼：jQuery顏色動畫不能跨多個元素同步

$(".jumbotron-fluid, .btn").animate({ 
    backgroundColor: colors[seed]["background"] 
}); 
$(".container").animate({ 
    backgroundColor: colors[seed]["container"] 
}); 
$("p, blockquote footer, .btn, a:link, a:visited, a:hover, a:active, a").animate({ 
    color: colors[seed]["font"] 
});

這裏是一個CodePen一個鏈接，顯示這個項目在行動：http://codepen.io/christianflorez/full/OWdYRm/

當「獲取一個新的報價」按鈕點擊，每次在字體顏色按鈕更改爲白色，但不會與DOM的其餘部分同步更改。任何人都知道爲什麼這可能會發生？我試過跨多個瀏覽器測試代碼，並出現相同的問題。謝謝大家的幫助。

來源

2017-02-14 Christian Florez

JavaScript不是多線程的。一次只有一個進程。您的jQuery動畫只有在以前的格式編寫完成後纔會觸發。爲了解決這個問題，你可以把動畫功能放在一個單獨的處理程序中，一旦單個函數被調用，動畫就會啓動。 – Korgrue

@Korgrue，javascript確實不是多線程的，但這並不意味着jQuery動畫無法並行進行。每個動畫出現在許多單獨的事件線程中，允許多個動畫交錯。 –

animate的參數queue的默認值爲true。在動畫.btn兩次時，第一個動畫在第一個動畫結束後被觸發。將queue更改爲false爲第一個.btn動畫。 codepen link

$(".jumbotron-fluid, .btn").animate({ 
    backgroundColor: colors[seed]["background"] 
},{queue:false} 
); 
$(".container").animate({ 
    backgroundColor: colors[seed]["container"] 
    } 
); 
$("p, blockquote footer, .btn, a:link, a:visited, a:hover, a:active, a").animate({ 
    color: colors[seed]["font"] 
    } 
);

來源

2017-02-14 20:51:42

這個效果很好。非常感謝您的解答和解釋！ –

jQuery顏色動畫不能跨多個元素同步

回答

相關問題