jQuery Animate（）和BackgroundColor

我想通過使用JQuery改變背景顏色來創建一個簡單的脈衝效果。但是，我無法使backgroundColor生成動畫。jQuery Animate（）和BackgroundColor

function show_user(dnid) { 
    /* dnid is HTML ID of a div. */ 
    if (! $(dnid).is(':visible')) { 
     $(dnid).show() 
    } 
    $('html, body').animate({scrollTop: $(dnid).offset().top}); 
    $(dnid).animate({backgroundColor: "#db1a35"}, 1200); 
}

什麼奇怪的是，這種替代的動畫作品：

$(dnid).animate({opacity: "toggle"}, 1200);

但它不是我想要的。

此外，該功能中的show（）和滾動功能正常工作。這只是沒有的背景色動畫。

以上函數是由這個環節稱爲 <a href="#" onclick="javascript:show_user('#9e4cde88b90004ea722e9e129ed83747')">Locate Me</a>

有人能幫助我的背景顏色動畫？

=========

謝謝大家的幫助。很多相似的答案。這裏是我結束了

在我的頭

<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>

然後在我的show_user功能滾動動畫之後。

var bgcol = $(dnid).css('backgroundColor'); 
$(dnid).animate({backgroundColor: "#db1a35"}, 2000); 
$(dnid).animate({backgroundColor: bgcol}, 2000);

這給出了一個相對較快的紅色「脈衝」，可以吸引用戶的眼睛。

再次感謝您的幫助。

來源

2013-05-31 fandingo

你需要爲使用jQuery UI的，或彩色插件動畫色彩。 –

不知道這是否仍然如此，但Jon Resig自己製作了一個僅用於背景顏色動畫的背景插件，它不是內置於jQuery中的內容。 – Sethen

可能是這應該幫助http://stackoverflow.com/a/14362680/297641 –

jQuery默認情況下無法爲顏色設置動畫。爲了製作動畫顏色，請使用官方的jQuery.Color插件。

所有的動畫屬性都應該被動畫爲一個數值，除非如下所述;大多數非數字屬性不能使用基本的jQuery功能進行動畫（例如，除非使用jQuery.Color（）插件，否則寬度，高度或左側可以是動畫，但背景色不可以）。

Source

來源

2013-05-31 18:33:58 Nathaniel

太棒了！感謝解釋爲什麼backgroundColor從標準庫中排除。我已根據您的建議創建瞭解決方案。 – fandingo

爲什麼不只是動畫的CSS屬性：'$（dnid）.animate（{'background-color'：「＃db1a35」}，1200）;'看到我的回答低於 –

謝謝！你解決了我的問題。 – debbie

jQuery的支持任何數字 CSS特性，其不包括顏色之間的動畫。但是，還有其他的庫可以使動畫顏色成爲可能。一個這樣的圖書館是恰當的名字jQuery Color。它的readme page顯示了幾個例子，說明如何使用jQuery功能在顏色之間進行動畫效果。

來源

2013-05-31 18:39:10 grandivory

太棒了。我沒有意識到jQuery將動畫限制爲數字屬性。感謝您的詳細解釋。 – fandingo

您必須先將背景設置爲from顏色，否則它不會再做任何事情。您還typoed CSS屬性'background-color'並把它像我的報價沒有:)

$(dnid).css({'background-color': "#ffffff"}); 

$(dnid).animate({'background-color': "#db1a35"}, 1200);

來源

2013-05-31 18:41:59

如果你不想重置的東西有其他的樣式屬性，你可以做'$（dnid）.css（'background-color'，'#ffffff'）;' –

這是否工作？你可以幫忙嗎？我無法讓這個爲我工作。 – Chud37

對不起@ Chud37事實證明我正在使用顏色動畫的jQueryUI庫。 http://jsfiddle.net/aw42aj2L/ –

使用CSS animation財產和keyframes

See it in action

HTML

<div></div>

CSS

div { 
    background-color: red; 
    height: 200px; width: 200px; 
    -webkit-animation: pulse 1s ease-in 0 infinite normal both; 
    -moz-animation: pulse 1s ease-in 0 infinite normal both; 
    -o-animation: pulse 1s ease-in 0 infinite normal both; 
    animation: pulse 1s ease-in 0 infinite normal both; 
} 

@-webkit-keyframes pulse { 
    0% { background-color: red; } 
    65% { background-color: #7F0093; } 
    100% { background-color: blue; } 
} 
@-moz-keyframes pulse { 
    0% { background-color: red; } 
    65% { background-color: #7F0093; } 
    100% { background-color: blue; } 
} 
@-ms-keyframes pulse { 
    0% { background-color: red; } 
    65% { background-color: #7F0093; } 
    100% { background-color: blue; } 
} 
@-o-keyframes pulse { 
    0% { background-color: red; } 
    65% { background-color: #7F0093; } 
    100% { background-color: blue; } 
} 
@keyframes pulse { 
    0% { background-color: red; } 
    65% { background-color: #7F0093; } 
    100% { background-color: blue; } 
}

來源

2013-05-31 18:54:23 Sourabh

謝謝你這個簡單的選項來創造這種效果！ – Ned

不客氣'：）'不要忘記檢查跨瀏覽器的兼容性，如果你打算在生產中使用它 – Sourabh

破壞Firefox 27.0.1 –

只需添加此下方的jQuery腳本和你做：

<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>

來源

2017-06-16 09:02:48 Darush

jQuery Animate（）和BackgroundColor

回答

相關問題