Quiero cambiar el color de fondo de 'exampleDiv' del fondo blanco original a cuando llamo al código siguiente para cambiar inmediatamente el fondo amarillo y luego volver a fundir el fondo blanco original.JQuery color de fondo animado no funciona
$("#exampleDiv").animate({ backgroundColor: "yellow" }, "fast");
Sin embargo, este código no funciona.
Tengo solo el JQuery core y JQuery UI vinculado a mi página web.
¿Por qué no funciona el código anterior?
Creo que también necesita JQuery Color Animations.
La animación de backgroundColor no es compatible con jQuery 1.3.2 (o anterior). Solo se admiten los parámetros que toman valores numéricos. Vea el documentation en el método. El color animations plugin agrega la capacidad de hacer esto a partir de jQuery 1.2.
Todavía está el caso en 1.4: http://api.jquery.com/animate/ –
La interfaz de usuario de jQuery tiene un efecto de realce que hace exactamente lo que desea.
$("exampleDiv").effect("highlight", {}, 5000);
Tiene algunas opciones como cambiar el color de resaltado.
Para mí, funcionó bien con effects.core.js. Sin embargo, no recuerdo si eso es realmente necesario. Creo que solo funciona con valores hexadecimales. Aquí hay un código de muestra flotante que hace que las cosas se desvanezcan mientras se desplaza. Pensó que podría ser útil:
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");
que he tenido éxito variable con animate, pero se encontró que el uso de su base de devolución de llamada, más de jQuery css parece funcionar para la mayoría de los casos.
Pruebe esta función:
$(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);
});
};
});
y lo llaman así:
$('#exampleDiv').animateHighlight();
Probado en IE9, FF4 y Chrome, usando jQuery 1.5 (no se necesita plugin de interfaz de usuario para esto). Tampoco utilicé el complemento de color jQuery; solo lo necesitaría si desea usar colores con nombre (por ejemplo, 'yellow' en lugar de '#FFFF9C').
Tuve que usar el archivo color.js para que esto funcione. Estoy usando jquery 1.4.2.
que tenían el mismo problema y yo era capaz de conseguir que todo funcione al incluir a los archivos js correctas.
<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>
Lo llevé un paso más allá y encontré una buena extensión que alguien escribió.
jQuery.fn.flash = function (color, duration) {
var current = this.css('backgroundColor');
this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration/2)
.animate({ backgroundColor: current }, duration/2);
}
El código anterior me permite hacer lo siguiente:
$('#someId').flash('255,148,148', 1100);
Este código hará que su elemento a flash a rojo y luego volver a su color original.
Aquí hay un código de muestra. http://jsbin.com/iqasaz/2
Me encontré con el mismo problema y, finalmente, resultó ser una llamada múltiple de archivo js de jquery en la página.
Si bien esto funciona absolutamente bien con cualquier otro método y también con animar cuando se intenta con otras propiedades CSS como izquierda, pero no funciona para la propiedad de color de fondo en el método animado.
Por lo tanto, eliminé la llamada adicional del archivo js de jquery y funcionó absolutamente bien para mí.
acaba de añadir este fragmento a continuación escritura de jQuery y de inmediato comenzó a trabajar:
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
posible duplicado de [jQuery animar backgroundColor] (http://stackoverflow.com/questions/190560/jquery -animate-backgroundcolor) – mercator