Comment utiliser l'animation de couleur de l'interface utilisateur jQuery pour passer d'une couleur d'élément à une autre et y revenir?

Question

J'utilise l'extrait suivant:

$('input[value=NEW]:hidden').attr('value', '').parent().parent().animate({ 
        backgroundColor: "#FF9933", 
        duration: 800 
       }).delay(500).animate({ 
        duration: 800, 
        backgroundColor: '#ffffff' 
       }); 

Cependant, je voudrais animer l'élément à la couleur « # FF9933 » mais l'animation RETOUR à la couleur il était avant de changer.

J'ai essayé de simplement conserver la couleur d'arrière-plan des éléments dans un var et de l'utiliser, mais l'animation de l'interface utilisateur jQuery n'a pas semblé apprécier la chaîne RGB() que .css() m'a donnée.

Comment voulez-vous faire cela?

Answer 1

i stocker si elle est dans un gestionnaire .. dans votre exemple fourni, vous pouvez utiliser une var scope locale

ne pas utiliser var scope locale:

var $parent = $('input[value=NEW]:hidden').attr('value', '').parent().parent(); 
$parent.data('oldBgColor', $parent.css('backgroundColor') //save the old bg 
     .animate({ 
       backgroundColor: "#FF9933", 
       duration: 800 
     }).delay(500).animate({ 
       duration: 800, 
       backgroundColor: $parent.data('oldBgColor') 
     }); 

avec une portée locale:

var $parent = $('input[value=NEW]:hidden').attr('value', '').parent().parent(); 
var oldBgColor = $parent.css('backgroundColor');//save the old bg - still accessible in the delayed animate 
$parent.animate({ 
       backgroundColor: "#FF9933", 
       duration: 800 
     }).delay(500).animate({ 
       duration: 800, 
       backgroundColor: oldBgColor 
     });