Animer les transitions de changement de couleur

Question

Avec css ou autre, nous changeons les couleurs comme les arrière-plans, la couleur, la couleur de la bordure, etc. Existe-t-il un moyen d'animer la transition entre les couleurs normale et verticale?

Ce que je veux dire est les couleurs, disons changer instantanément du blanc au noir. Je veux les étapes de transition comme toute l'échelle de gris entre le blanc et le noir. Avec les couleurs, ceci peut être obtenu par effet de fondu si une couleur se fond dans une autre. Les couleurs entre les deux sont couvertes.

Existe-t-il un moyen d'y parvenir?

Answer 1

Sons comme un travail pour jQuery - en particulier, pour la Animate() Méthode:

Answer 2

Vous ne pouvez pas animer directement la couleur en utilisant jQuery puisque "couleur" n'est pas une propriété CSS numérique. Mais vous pouvez faire quelque chose comme ceci: Laissez l'élément A être stylisé pour refléter l'état non-stationnaire, et laissez l'élément B être stylisé pour refléter l'état stationnaire sauf avec l'opacité définie sur 0. Positionnez ensuite l'élément B directement sur élément A. Utilisez ensuite les méthodes jQuery fadeIn() et fadeOut() pour modifier l'opacité de l'élément B lors du survol.

Answer 3

est-ce possible? oui

Comment est-ce possible? javascript

X3Maverick a une bonne réponse (sur la mise voix, désolé), mais vous pouvez aussi essayer de faire une minuterie pour ajuster les couleurs en conséquence

var interval = 500, 
    iteration = 0, 
    maxIterations = 10; 

setTimeout(doUpdate, interval); 

function doUpdate() 
{ 
    //color logic here 'rgb(R, G, B)' or #GHIJKL 
    switch (interval) 
    { 
    case 0: 
    ... 
    } 
    if (iteration < maxIterations) setTimeout(doUpdate, interval); 
} 

cela vous permet de spécifier exactement quelles couleurs vous vouloir et dans quel ordre. S'il vous plaît n'utilisez vos pouvoirs que pour le bien ou pour le génial. Les couleurs clignotantes et le texte clignotant provoquent des crises et ne sont pas appréciés.

jQuery a maintenant un plugin d'animation couleur officielle:
http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations

Answer 4

Cela peut être fait avec CSS3, bien que ce n'est pas complètement multi-navigateur pour l'instant. http://www.the-art-of-web.com/css/css-animation/

a { 
    -webkit-transition: all 1s ease-in-out; // control the animation time via '1s' 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    color:#ff0000; 
} 

a:hover { color:#00ff00 } 

Sinon, vous pouvez utiliser jQuery .animate();

 $("#yourdiv").css({ 
      backgroundColor: #000000 // Original Background color 
     }).hover(function() { 
      $(this).stop().animate({ 
       backgroundColor: #ff0000 // Hover State Background color 
      }, 350); // animation time 
     }, function() { 
      $(this).stop().animate({ 
       backgroundColor: #000000 // Hover out (back to original) 
      }, 350); // animation time 
     });