2011-11-30 11 views
10

jQuery için bir jQuery komut dosyası veya 3. taraf eklenti arıyorum; bu, “renkten” ve “renge” dayalı olarak bir soluk açma/kapama efekti yaratabilir. Örnek Ben böyle:jQuery - Bir renkten diğerine nasıl yanıp söner? (olası 3. parti eklenti jQuery?)

$(selector).fadeColor({ 
    from: "#900", // maroon-red color 
    to: "#f00", // blood-red color 
}, 3000); // last argument is the time interval, in milliseconds in this particular case it's based for 3 seconds 

cevap

15

jQuery UI renk animasyon dahil jQuery'nin animate yöntemi uzanır.

$("#someId").animate({backgroundColor: "#ff0000" }); 

İşte working example var: Daha sonra gibi bir şey yapabilirsiniz.

+0

benim durumumda çalışmıyor:/ –

+0

jQuery UI dahil ettiniz mi? Çekirdek jQuery kitaplığından sonra eklediğinizden emin olun. Sorunuzu bazı kodlarla güncelleyin veya sorunu gösteren bir jsfiddle yapın. –

+0

@JamesAllardice Animasyon çok hızlı gerçekleşiyor ki, bunu fark etmek bile zor. Solma animasyonunu yavaşlatmak mümkün mü? –

3

jQuery UI animate function yapacağız.

See here for jsFiddle.

+0

bir örnek kod bana daha fazla yardımcı olur :) –

+0

jQuery'nin "animate" öğesi jQuery UI'yi de dahil etmedikçe renklendirmez, bu da onu genişletir. Cevabımı gör. –

+0

@Commando Güncellemeye bakın. –

0

İşte benim 2 sent değerinde - jsBir belge yüklendiğinde tetiklenen sürekli titreşimli düğmenin bir kısmı.

Demo here

function fadeDivIn(){ 
    $("#div").animate({backgroundColor: "#ed3" }, 4000, function(){fadeDivOut();}); 
} 

function fadeDivOut(){ 
    $("#div").animate({backgroundColor: "#3de" }, 4000, function(){fadeDivIn();}); 
} 

$(document).ready(function(){ 
    fadeDivIn(); 
}); 
+1

Bunun jQuery UI gerektirdiği söylenmelidir. –

10

Sen başka bir eklenti gerekmez. Örnek:

jQuery

$(selector).css("color", "blue"); 

CSS

selector { 
    transition: color .3s; 
} 

Bu sadece iyi çalışır (ve web sitesi yavaşlatmadan) olacaktır.

+2

Kendinize bir saat ayırın ve bunu kullanın! – KryptoniteDove

+0

Daha da kısa: $ (selector) .css ("geçiş", "color .3s"). Css ("color", "blue"); – Mirko