colore di sfondo JQuery animano non funziona

Question

voglio cambiare il colore di 'exampleDiv' background dallo sfondo bianco originale quando chiamo il codice qui sotto al cambiamento immediato lo sfondo giallo e poi svanire di nuovo al fondo bianco originale.

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

Tuttavia, questo codice non funziona.

ho solo il nucleo JQuery e JQuery UI legati alla mia pagina web.

Perché il codice sopra non funziona?

Answer 1

credo è inoltre necessario JQuery Color Animations.

Answer 2

Animare il backgroundColor non è supportato in jQuery 1.3.2 (o precedente). Sono supportati solo i parametri che accettano valori numerici. Vedere lo documentation sul metodo. Il color animations plugin aggiunge la possibilità di farlo a partire da jQuery 1.2.

Answer 3

L'interfaccia utente di jQuery ha un effetto di evidenziazione che fa esattamente ciò che si desidera.

$("exampleDiv").effect("highlight", {}, 5000); 

Si hanno alcune opzioni come cambiare il colore di evidenziazione.

Answer 4

Per me, ha funzionato bene con effects.core.js. Tuttavia, non ricordo se sia davvero necessario. Penso che funzioni solo con valori esadecimali. Ecco un esempio di codice di passaggio del mouse che rende le cose sbiadite mentre si passa il mouse. Ho pensato che potrebbe essere 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"); 

Answer 5

che ho avuto successo variabile con animate, ma ha scoperto che utilizzando il suo costruito nel callback più jQuery di css sembra funzionare per la maggior parte dei casi.

Prova questa funzione:

$(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); 
      }); 
    }; 
}); 

e chiamano in questo modo:

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

testato in IE9, FF4, e Chrome, utilizzando jQuery 1.5 (non è necessario plugin di interfaccia utente per questo). Non ho nemmeno usato il plug-in jQuery: ne avresti bisogno solo se desideri utilizzare i colori con nome (ad esempio 'yellow' anziché '#FFFF9C').

Answer 6

ho dovuto usare il file color.js per arrivare a questo lavoro. Sto usando jquery 1.4.2.

Get the color.js here

Answer 7

Ho avuto lo stesso problema e sono stato in grado di ottenere tutto al lavoro quando ho incluso i file js corretti.

<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> 

Ho fatto un ulteriore passo avanti e ho trovato una buona estensione che qualcuno ha scritto.

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

Il codice di cui sopra mi permette di fare quanto segue:

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

Che il codice avrà il suo elemento a lampeggiare in rosso poi di nuovo al suo colore originale.

Ecco alcuni esempi di codice. http://jsbin.com/iqasaz/2

Answer 8

Mi sono imbattuto nello stesso problema e alla fine si è rivelato essere più chiamata del file js di jquery nella pagina.

Mentre questo funziona perfettamente con qualsiasi altro metodo e anche con animate quando provato con altre proprietà css come sinistra, ma non funziona per la proprietà del colore di sfondo nel metodo animato.

Quindi, ho rimosso la chiamata aggiuntiva del file js di jQuery e ha funzionato perfettamente per me.

Answer 9

appena aggiunto questo frammento di seguito lo script jQuery e immediatamente iniziato a lavorare:

<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script> 

Source