jQuery的類變化的色彩過渡

我努力讓自己在登錄表單的背景顏色（梯度）變化使用CSS類新：jQuery的類變化的色彩過渡

.smallWindow-info{ 
    background-color: #339bb9; 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); 
    background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); 
    background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9)); 
    background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); 
    background-image: -o-linear-gradient(top, #5bc0de, #339bb9); 
    background-image: linear-gradient(top, #5bc0de, #339bb9); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); 
} 
.smallWindow-warning{ 
    background-color: #eedc94; 
    background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); 
    background-image: -moz-linear-gradient(top, #fceec1, #eedc94); 
    background-image: -ms-linear-gradient(top, #fceec1, #eedc94); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94)); 
    background-image: -webkit-linear-gradient(top, #fceec1, #eedc94); 
    background-image: -o-linear-gradient(top, #fceec1, #eedc94); 
    background-image: linear-gradient(top, #fceec1, #eedc94); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0); 
}

但ID不工作，請幫助這裏是代碼。 http://jsfiddle.net/4JFpa/

來源

2014-07-10 masterdany88

您可以使用CSS動畫。只需更改css類。

.smallWindow-warning{ 
background-color: #339bb9; 
background-image: linear-gradient( rgba(255,255,255,0.6), rgba(0,0,0,0.6)); 
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); 
animation: smallWindow-warning 5s forwards; 
} 

@keyframes smallWindow-warning { 
100% {background-color: #eedc94;} 
}

Demo

來源

2014-07-10 14:11:32

這看起來很有希望。我會查的。謝謝 – masterdany88

我試過了，但id dosnt在漸變背景下工作。或者我錯過了什麼？檢查這裏：http://jsfiddle.net/9CgcN/ – masterdany88

對不起，但你不能動畫CSS背景漸變。 Im動畫背景顏色。你可以嘗試添加幾個漸變，然後爲背景位置設置動畫。 –

試試這個：你需要在引號中傳遞類名（都是刪除/添加）。並在動畫完成後刪除信息類，然後添加警告類並啓動動畫。

API Doc for animate()

$(document).ready(function(){ 

    $("#loginPanel").animate({ 
    opacity: 0 
    }, 3000, function() { 
     $(this).removeClass('smallWindow-info').addClass('smallWindow-warning').animate({ opacity: 1 }, 3000); 
    }); 
});

Demo

來源

2014-07-10 12:45:41

良好的解決方案，但它會導致我的整個形式disapear爲秒。沒有我=消失就可以完成嗎？ – masterdany88

，你可以通過改變不透明度值大於0來管理。看到這個http://jsfiddle.net/4JFpa/11/ –

它更好，導致窗口dosnt disapear在所有，但沒有顏色過渡動畫。背景將不透明度改爲f.e. 0.4，然後立即改變顏色。新背景將不透明度從f.e 0.4改爲1. – masterdany88

jQuery的類變化的色彩過渡

回答

相關問題