2010-07-13 6 views
18

Est-ce que quelqu'un sait si jQuery peut gérer une animation comme:animations de couleurs RGBA + jQuery

rgba(0,0,0,0.2) → rgba(0,255,0,0.4)

Je sais qu'il ya un plugin pour gérer des animations de couleurs, mais cela pourrait être trop moderne?

+0

réponses utiles sur cette question signalé comme double: http://stackoverflow.com/questions/4194745/changing-rgba -alpha-transparence-with-jquery – jedierikb

Répondre

8

Euh, rien à faire. J'ai trouvé une modification incroyable au plugin jquery.

http://pioupioum.fr/sandbox/jquery-color/

+1

Um, juste pour ajouter une autre friandise aléatoire de fraîcheur pour ceux qui sont intéressés. RGBA navigateur croisé via la génération d'image php: http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/ – Matrym

+1

Malheureusement, cette version modifiée ne semble pas supporter les navigateurs modernes :( –

25

en utilisant l'animation CSS3 (pas javascript)

Vous pouvez également obtenir le même effet en utilisant l'animation CSS3. Voir ci-dessous,

Étape 1: Créer une image clé pour votre animation

@keyframes color_up { 
    from { 
     background-color: rgba(0,0,0,0.2); 
    } 
    to { 
     background-color: rgba(0,255,0,0.4); 
    } 
} 

Étape 2: Utilisez les règles d'animation.

animation-name: color_up; 
    animation-duration: 2s; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
    animation-timing-function: ease-in-out; 

DEMO:http://jsfiddle.net/2Dbrj/3/

En utilisant jQuery

jQuery supporte maintenant color animation avec RGBA soutien. Cela s'anime réellement d'une couleur à l'autre.

$(selector).animate({ 
    backgroundColor: 'rgba(0,255,0,0.4)' 
}); 

DEMO: http://jsfiddle.net/2Dbrj/2/

+0

Magnifique! –

+0

@DjangoReinhardt Réponse mise à jour avec CSS3 –

+1

Le CSS3 JSFiddle ne semble pas vouloir fonctionner dans Chrome.Merci, cependant! –

2

utilisation jquery UI pour poignée, $(object).animate({color : 'rgba(0,0,0,.2)'},500)