JQuery couleur d'arrière-plan animer ne fonctionne pas

Je veux changer la couleur de fond 'exampleDiv" de l'original fond blanc lorsque j'appel le code ci-dessous dans l'immédiat, à modifier l'arrière-plan jaune, puis fondu en arrière à l'original fond blanc.

$("#exampleDiv").animate({ backgroundColor: "yellow" }, "fast");

Toutefois, ce code ne fonctionne pas.

Je n'ai que la base JQuery et JQuery UI lié à ma page web.

Pourquoi ne pas le code du travail ci-dessus?

double possible de jQuery animate backgroundColor

OriginalL'auteur AndyT | 2009-11-07

J'ai eu plus ou moins de succès avec animate, mais a constaté que l'utilisation de ses construit en rappel plus du jQuery css semble fonctionner pour la plupart des cas.

Essayer cette fonction:

$(document).ready(function () {

    $.fn.animateHighlight = function (highlightColor, duration) {
        var highlightBg = highlightColor || "#FFFF9C";
        var animateMs = duration || "fast"; //edit is here
        var originalBg = this.css("background-color");

        if (!originalBg || originalBg == highlightBg)
            originalBg = "#FFFFFF"; //default to white

        jQuery(this)
            .css("backgroundColor", highlightBg)
            .animate({ backgroundColor: originalBg }, animateMs, null, function () {
                jQuery(this).css("backgroundColor", originalBg); 
            });
    };
});

et de l'appeler de la sorte:

$('#exampleDiv').animateHighlight();

Testé dans IE9, FF4, et de Chrome, à l'aide de jQuery 1.5 (n'ont PAS besoin de l'INTERFACE utilisateur plugin pour cela). Je n'ai pas utiliser le jQuery plugin color - vous il ne serait nécessaire que si vous souhaitez utiliser des couleurs nommées (par exemple 'yellow' au lieu de '#FFFF9C').

Dans cet exemple, jaune backqround ne se transforme pas en blanc petit à petit. Après la période de temps définie, bacground devient blanche soudain en jQuery 1.5.2 sur FF3.
merci beaucoup! J'ai été chercher beaucoup pour trouver un petit plugin pour cet effet.

OriginalL'auteur matadur

8

Je crois que vous avez aussi besoin de JQuery Couleur Animations.

C'EST ce QUE je commençais à oublier. Merci!!!!
Le lien semble brisé. Aucune chance de le fixer?

OriginalL'auteur recursive

J'ai eu le même problème et j'ai été en mesure d'obtenir tout le travail lorsque j'ai joint le js fichiers.

<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/Scripts/jquery.color-2.1.2.js"></script>

J'ai pris une étape supplémentaire et trouvé une belle extension quelqu'un a écrit.

jQuery.fn.flash = function (color, duration) {
   var current = this.css('backgroundColor');
   this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration / 2)
   .animate({ backgroundColor: current }, duration / 2);
}

Le code ci-dessus me permet de faire ce qui suit:

$('#someId').flash('255,148,148', 1100);

Ce code va obtenir votre élément à clignoter au rouge puis de revenir à sa couleur d'origine.

Voici un exemple de code. http://jsbin.com/iqasaz/2

OriginalL'auteur inVINCEble

5

Le jQuery UI a un effet de survol qui fait exactement ce que vous voulez.
```
   $("exampleDiv").effect("highlight", {}, 5000);
```
Vous avez quelques options, comme le changement le point culminant de la couleur.

Cela nécessite de les Effets de package. Je suis à la recherche pour le plus léger façon pour moi de le fondu de couleur de l'arrière plan à l'intérieur d'avoir à utiliser un tas de différents bibliothèque 🙁
sans* (pas dans)
Pourquoi ça ne marche pas si la couleur d'arrière-plan est définie?

OriginalL'auteur Vincent Ramdhanie
3

De l'animation de la backgroundColor n'est pas pris en charge dans jQuery 1.3.2 (ou plus tôt). Seuls les paramètres qui prennent des valeurs numériques sont pris en charge. Voir la la documentation sur la méthode. Le couleur animations plugin ajoute la possibilité de faire ce que de jQuery 1.2.

Toujours le cas dans la version 1.4: api.jquery.com/animate

OriginalL'auteur tvanfosson
2

Je suis tombé sur le même problème et en fin de compte il s'est avéré que plusieurs d'appel de jquery du fichier js sur la page.

Alors que cela fonctionne très bien avec toutes les autres méthodes et à animer lorsqu'on l'a essayé avec d'autres propriétés css comme à gauche, mais il ne fonctionne pas pour la couleur de fond de la propriété à animer méthode.

Donc, j'ai supprimé l'appel de plus de jquery js fichiers, et il a travaillé très bien pour moi.

OriginalL'auteur Jay

Pour moi, il a bien fonctionné avec effects.core.js. Cependant, je ne me souviens pas si c'est vraiment nécessaire. Je pense qu'il ne fonctionne qu'avec des valeurs hexadécimales. Voici un échantillon placez le code qui rend les choses fondu que vous placez. Pensé qu'il pourrait être utile:

jQuery.fn.fadeOnHover = function(fadeColor)
{
    this.each(function()
    {
        jQuery(this).data("OrigBg",jQuery(this).css("background-color"));
        jQuery(this).hover(
            function()
            {
                //Fade to the new color
                jQuery(this).stop().animate({backgroundColor:fadeColor}, 1000)
            }, 
            function()
            {
                //Fade back to original color
                original = jQuery(this).data("OrigBg");
                jQuery(this).stop().animate({backgroundColor:original},1000) 
            }
        );
    });
}
$(".nav a").fadeOnHover("#FFFF00");

OriginalL'auteur Eric

1

J'ai dû utiliser la color.js fichier pour obtenir que cela fonctionne. J'utilise jquery 1.4.2.

Obtenez de l'color.js ici

OriginalL'auteur aruffo3
0

Juste ajouté cet extrait de code ci-dessous script jquery et il a immédiatement commencé à travailler:
```
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
```
Source

OriginalL'auteur Darush

Vous devez vous connecter pour publier un commentaire.