Comment avez-vous fade in/out une couleur d'arrière-plan à l'aide de jquery?

Question

Vous savez comment certains sites de fade in /out de la couleur sur un message d'erreur, comment pouvez-vous dothat avec jquery?

Le point est d'attirer l'attention de l'utilisateur sur le message.

Answer 1

Si vous voulez spécifiquement animer la couleur d'arrière-plan d'un élément, je crois que vous devez inclure jQueryUI cadre. Ensuite, vous pouvez faire:

$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');

jQueryUI a certains effets qui peuvent être utiles pour vous.

http://jqueryui.com/demos/effect/

Answer 2

Cette même fonctionnalité (3 secondes de préchauffage pour mettre en surbrillance un message) est mis en œuvre dans le jQuery UI comme le point culminant de l'effet

http://docs.jquery.com/UI/Effects/Highlight

La couleur et la durée sont variables

Answer 3

Habituellement, vous pouvez utiliser le .animate() méthode pour manipuler arbitraire des propriétés CSS, mais pour les couleurs d'arrière-plan, vous devez utiliser le plugin color. Une fois que vous incluez ce plugin, vous pouvez utiliser quelque chose comme d'autres ont indiqué $('div').animate({backgroundColor: '#f00'}) pour changer la couleur.

Comme d'autres l'ont écrit, une partie de ce qui peut être fait en utilisant la bibliothèque jQuery UI.

Answer 4

À l'aide de jQuery uniquement (pas de bibliothèque d'INTERFACE utilisateur/plugin). Même jQuery peuvent être facilement éliminés

//Color row background in HSL space (easier to manipulate fading)
$('tr').eq(1).css('backgroundColor','hsl(0,100%,50%');

var d = 1000;
for(var i=50; i<=100; i=i+0.1){ //i represents the lightness
    d  += 10;
    (function(ii,dd){
        setTimeout(function(){
            $('tr').eq(1).css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
        }, dd);    
    })(i,d);
}

Démo : http://jsfiddle.net/5NB3s/2/

• SetTimeout augmente la luminosité de 50% à 100%, essentiellement à l'arrière-plan blanc (vous pouvez choisir n'importe quelle valeur en fonction de votre couleur).
• SetTimeout est enveloppé dans une fonction anonyme pour qu'il fonctionne correctement dans une boucle ( de la raison )

Answer 5

J'ai écrit un super simple plugin jQuery pour réaliser quelque chose de semblable à cela. Je voulais quelque chose de vraiment léger (c'est 732 octets minifiés), donc y compris un gros plugin ou de l'INTERFACE utilisateur était hors de question pour moi. C'est toujours un peu rude sur les bords, donc la rétroaction est la bienvenue.

Vous pouvez télécharger le plugin ici: https://gist.github.com/4569265.

En utilisant le plugin, il serait simple de créer un effet de survol en changeant la couleur d'arrière-plan, puis en ajoutant un setTimeout de le feu le plugin pour estomper la couleur d'arrière-plan.