Ayuda de JQuery: color de fondo animado

Question

Usando JQuery, lo que quiero hacer es crear una función que cuando llame a la función, desvanecerá el color de fondo de mi DIV "#page" del color de fondo CSS a amarillo, luego volver al color de fondo original de CSS para #page.

¿Alguna idea sobre cómo puedo hacer esto con JQuery?

Sé que JQuery tiene una funcionalidad "animada" y "resaltada". Parece que "resaltar" podría ser la opción adecuada, pero no estoy seguro.

Gracias

Answer 1

podría utilizar la función integrada de jQuery animate() con una devolución de llamada para activar el div volver al color original. O use el jQuery pulse plugin para hacerlo automáticamente.

Espero que ayude!

Answer 2

Necesita el complemento color para animar entre colores.

Ver un SO anterior q & a

Answer 3

Es posible que desee echa un vistazo a los plugins como this one para lograr lo que algunos llaman un "flash".

Desafortunadamente, la búsqueda del término "jquery flash plugin" arroja cientos de resultados para los complementos del reproductor SWF.

Answer 4

function flashColor(id) 
{ 
    var container = $('#'+id); 
    if(container.length) 
    { 
     var originalColor = container.css('backgroundColor'); 
     container.animate({ 
      backgroundColor:'yellow' 
     },'normal','linear',function(){ 
      $(this).animate({ 
       backgroundColor:originalColor 
      }); 
     }); 
    } 
} 

Answer 5

Es bastante pesada para cargar la interfaz de usuario jQuery sólo para esto una característica, pero si usted lo está utilizando de todos modos, el efecto que desea es 'destacado'

http://docs.jquery.com/UI/Effects/Highlight

$("div").click(function() { 
     $(this).effect("highlight", {}, 3000); 
}); 

Answer 6

Usted solo necesita el complemento de color jQuery si desea utilizar colores con nombre (por ejemplo, 'yellow' en lugar de '#FFFF9C'). Tuve un éxito variable con animate, pero descubrí que usar su devolución de llamada integrada más jQuery's css parece funcionar en la mayoría de los casos.

Trate de añadir esta función:

$(document).ready(function() { 

    $.fn.animateHighlight = function (highlightColor, duration) { 
     var highlightBg = highlightColor || "#FFFF9C"; 
     var animateMs = duration || 1000; 
     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 decir que es así:

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

Probado en IE9, FF4 y Chrome, usando jQuery 1.5 (no se necesita plugin de interfaz de usuario para esto) .

Answer 7

prueba con todos los navegadores

$(document).ready(function() { 
    var id = $("div#1"); // div id=1 
    var color = "lightblue"; // color to highlight 
    var delayms = "800"; // mseconds to stay color 
    $(id).css("backgroundColor",color) 
    .css("transition","all 1.5s ease") // you may also (-moz-*, -o-*, -ms-*) e.g 
    .css("backgroundColor",color).delay(delayms).queue(function() { 
     $(id).css("backgroundColor",""); 
     $(id).dequeue(); 
    }); 
}); 

Answer 8

Sólo esto me ayudó. Fuente: questions/5205445

$("div").click(function() 
{ 
    // do fading 3 times 
    for(i=0;i<3;i++) 
    { 
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0); 
    } 
});