Animer le changement de couleur de fond avec toggleClass?

Question

Est-il possible d'animer un changement de couleur d'arrière-plan avec toggleClass?

Here is the page working currently. - ce qui a été mis à jour depuis le premier poster

Est-il possible d'animer ce? Je dois utiliser toggleClass à la place de l'animation étendue de JQuery UI car il y a des images d'arrière-plan dans le CSS original et animate va changer la couleur de fond, mais pas supprimer l'image de fond. De plus, je veux basculer, ne pas changer la couleur de fond en permanence.

Voici le javascript actuel:

function ToggleClass() { 
      $("#Section2").toggleClass("errorpanel"); 
      $("#Secion2HeaderText").toggleClass("errortext"); 
     } 

En second lieu, comme vous le voyez, je dois changer les fichiers CSS deux fois. Je ne comprends pas pourquoi cette classe pour le

.errorpanel{ color: #ffffff !important; background: red !important;} 

ne se termine pas par l'étiquette. Il va changer l'en-tête accordéon en blanc quand il n'est pas sélectionné, mais quand il est sélectionné, il laisse l'arrière-plan en rouge, mais change la couleur à la nuance originale de bleu. Je peux passer outre cela et obtenir pour rester blanc tout le temps en ajoutant cette classe:

.errortext{color: #ffffff !important;} 

Quoi qu'il en soit, je voudrais animer les deux avant et en arrière.

Edit:

Je pense quelque chose comme ceci:

function ToggleClass() { 
     var color = $("#Section2").css("background-color"); 
     if (color == 'rgb(255, 0, 0)') { 
      $("#Section2").animate({ backgroundColor: "#507CD1" }, 2500); 
      $("#Section2").toggleClass("testerrorpanel"); 
     } 
     else { 
      $("#Section2").toggleClass("testerrorpanel"); 
      $("#Section2").animate({ backgroundColor: "red" }, 2500); 
     } 

     $("#Secion2HeaderText").toggleClass("errortext"); 
    } 

Cela semble voir si l'arrière-plan est rouge. Si c'est le cas, la couleur d'arrière-plan revient à la valeur d'origine, avec l'image d'arrière-plan (et le panneau devient toujours plus clair lorsqu'il est sélectionné, de sorte que toutes les fonctionnalités d'origine sont renvoyées). La seule chose que le toggle fait maintenant est de supprimer l'image d'arrière-plan car elle ne peut pas être animée. This page shows the current functionality.

Answer 1

Vous pouvez essayer d'utiliser retard

$("#Section2").animate({ backgroundColor: "red" }, 2500).delay(800).animate({ backgroundColor: "#507CD1" }, 2500); 

Pas sûr à 100% mais je pense que cela peut fonctionner.