Utilisation de jquery animate pour mettre en surbrillance div en charge

Question

J'ai un système de notification simple. Je veux utiliser jquery pour mettre en évidence la div onload en changeant la couleur de fond et revenir à la normale après 500ms juste un flash. Semblable à quand nous répondons aux questions sur Stackoverflow. Assez simple pour attirer l'attention.

<div id="flash">Notification</div> 

$(function() { 
    $("#flash").animate({ 
    backgroundColor: "#aa0000", 
    }, 1000); 
}); 

Cela ne fonctionne pas comme prévu. Il ne revient pas à #ffffff.

J'apprécie toute aide.

Answer 1

L'interface utilisateur de JQuery a un effet spécifique appelé highlight. Les problèmes de l'utilisation animate sur les propriétés comme background-color sont décrites here:

Toutes les propriétés animées doivent être animés à une seule valeur numérique, sauf noté ci-dessous; la plupart des propriétés non numériques ne peuvent pas être animées à l'aide de la fonctionnalité de base jQuery. (Pour exemple, la largeur, la hauteur, ou à gauche peut être animé mais couleur de fond ne peut pas être .) Les valeurs de propriété sont traités comme un nombre de pixels , sauf indication contraire. Les unités em et% peuvent être spécifiées, le cas échéant.

Modifier si vous ne voulez vraiment pas aller avec l'option jQuery UI, vous pourriez simuler un effet similaire en enveloppant le background-color dans son propre élément et cacher cela. Par exemple: http://jsfiddle.net/niklasvh/x2jrU/