自動動畫網頁的背景顏色，當一個頁面加載

可能重複：
jQuery animate backgroundColor 自動動畫網頁的背景顏色，當一個頁面加載

是否有可能進行動畫/過渡某一個元素的背景色自動時頁面加載？

我有數據的頁面是這樣的：

<ul> 
    <li> Some stuff</li> 
    <li> Some other stuff</li> 
    <li class="unread"> Some more stuff</li> 
</ul>

爲了與.unread類我想要的背景圖像開始爲淺黃色，然後元素都有它消失在常規頁面背景 - 顏色（在這種情況下是白色）想想Facebook上的新PM或通知，這是我試圖實現的效果。

來源

2012-01-19 Xecure

您可以使用CSS屬性transition;

HTML

<div class="transition"></div>

CSS

div.transition { 
    height: 100px; 
    width: 100px; 
    background-color: #ffffff; 
    transition: background-color 1s linear; 
    -moz-transition: background-color 1s linear; 
    -o-transition: background-color 1s linear; 
    -webkit-transition: background-color 1s linear; 
} 
div.animated { 
    background-color: #ff0000; 
}

的JavaScript

$(document).ready(function() { 
    $('.transition').addClass('animated'); 
});

見demo 。

參考：http://iamchenghan.wordpress.com/2010/05/30/css3-color-animation/

來源

2012-01-19 08:32:27 Stefan

使用這將意味着當用戶懸停或點擊某個元素時，背景會發生變化。我試圖在頁面加載後立即更改bg顏色。 – Xecure

是的，更新了我的答案。 – Stefan

完美無瑕地工作，謝謝！ – Xecure

在頁面上使用jQuery Color Plugin。

$(function() { 
    $(".unread").animate({ backgroundColor: "[hex-here]" }, "slow"); 
});

其中[hex-here]是你的頁面背景顏色。

來源

2012-01-19 08:14:27

「大多數屬性是非數字不能使用基本的jQuery功能性（例如，寬度，高度是動畫，或左可以是動畫，但背景顏色不能，除非jQuery.Color （）插件被使用。「http://api.jquery.com/animate/ – Stefan

我實際上已經試過這段代碼，但它不起作用。我通過CSS設置.unread background-color到＃999然後改變了[ hex-here] to #fff。當頁面加載帶有未讀類的元素具有#ccc背景時，沒有任何更改編輯：斯特凡說了什麼^ – Xecure

@Stefan - 謝謝，我已經包含了對顏色插件的引用 –

自動動畫網頁的背景顏色，當一個頁面加載

回答

相關問題