¿Cómo se desvanece un color de fondo usando jquery?

Question

¿Cómo me desvanezco en el contenido de texto con jQuery?

El objetivo es llamar la atención del usuario sobre el mensaje.

Answer 1

Esta funcionalidad exacta (3 segundos brillo para resaltar un mensaje) se implementa en la interfaz de usuario jQuery como el efecto de relieve

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

color y duración son variables

Answer 2

Si desea animar específicamente el color de fondo de un elemento, creo que debe incluir el marco jQueryUI. A continuación, puede hacer:

$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow'); 

jQueryUI tiene algunos efectos incorporados que pueden ser útiles para usted también.

http://jqueryui.com/demos/effect/

Answer 3

Por lo general, puede usar el método .animate() para manipular propiedades de CSS arbitrarias, pero para los colores de fondo debe usar el color plugin. Una vez que incluya este complemento, puede usar algo como otros que hayan indicado $('div').animate({backgroundColor: '#f00'}) para cambiar el color.

Como han escrito otros, parte de esto se puede hacer usando la biblioteca jQuery UI también.

Answer 4

a desvanecerse entre 2 colores usando sólo javascript simple:

function Blend(a, b, alpha) { 
    var aa = [ 
     parseInt('0x' + a.substring(1, 3)), 
     parseInt('0x' + a.substring(3, 5)), 
     parseInt('0x' + a.substring(5, 7)) 
    ]; 

    var bb = [ 
     parseInt('0x' + b.substring(1, 3)), 
     parseInt('0x' + b.substring(3, 5)), 
     parseInt('0x' + b.substring(5, 7)) 
    ]; 

    r = '0' + Math.round(aa[0] + (bb[0] - aa[0])*alpha).toString(16); 
    g = '0' + Math.round(aa[1] + (bb[1] - aa[1])*alpha).toString(16); 
    b = '0' + Math.round(aa[2] + (bb[2] - aa[2])*alpha).toString(16); 

    return '#' 
     + r.substring(r.length - 2) 
     + g.substring(g.length - 2) 
     + b.substring(b.length - 2); 
} 

function fadeText(cl1, cl2, elm){ 
    var t = []; 
    var steps = 100; 
    var delay = 3000; 

    for (var i = 0; i < steps; i++) { 
    (function(j) { 
     t[j] = setTimeout(function() { 
      var a = j/steps; 
      var color = Blend(cl1,cl2,a); 
      elm.style.color = color; 
     }, j*delay/steps); 
    })(i); 
    } 

    return t; 
} 

var cl1 = "#ffffff"; 
var cl2 = "#c00000"; 
var elm = document.getElementById("note"); 
T = fadeText(cl1,cl2,elm); 

Fuente: http://www.pagecolumn.com/javascript/fade_text.htm

Answer 5

me escribió un súper simple plugin de jQuery para lograr algo similar a esto. Quería algo realmente liviano (es 732 bytes minimizado), por lo que incluir un gran complemento o interfaz de usuario estaba fuera de mi alcance. Todavía es un poco difícil en los bordes, por lo que los comentarios son bienvenidos.

Puede consultar el plugin aquí: https://gist.github.com/4569265.

Usando el complemento, sería una simple cuestión de crear un efecto de resaltado cambiando el color de fondo y luego agregar un setTimeout para disparar el complemento para volver al color de fondo original.

Answer 6

Uso de jQuery solamente (sin biblioteca de UI/complemento). Incluso jQuery puede ser fácilmente eliminado

//Color row background in HSL space (easier to manipulate fading) 
$('tr').eq(1).css('backgroundColor','hsl(0,100%,50%'); 

var d = 1000; 
for(var i=50; i<=100; i=i+0.1){ //i represents the lightness 
    d += 10; 
    (function(ii,dd){ 
     setTimeout(function(){ 
      $('tr').eq(1).css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
     }, dd);  
    })(i,d); 
} 

Demostración: http://jsfiddle.net/5NB3s/2/

• SetTimeout aumenta la ligereza del 50% al 100%, esencialmente haciendo que el fondo blanco (se puede elegir cualquier valor dependiendo de su color).
• SetTimeout se envuelve en una función anónima para que funcione correctamente en un bucle (reason)

Answer 7

Dependiendo de su soporte de los navegadores, se puede usar una animación CSS. El soporte del navegador es IE10 y más para la animación CSS. Esto es bueno, así que no tiene que agregar la dependencia de la interfaz de usuario de jquery si solo se trata de un pequeño huevo de Pascua.Si es parte integral de su sitio (también conocido como necesario para IE9 y abajo) vaya con la solución de IU de jquery.

.your-animation { 
    background-color: #fff !important; 
    -webkit-animation: your-animation-name 1s ease 0s 1 alternate !important; 
} 
//You have to add the vendor prefix versions for it to work in Firefox, Safari, and Opera. 
@-webkit-keyframes your-animation-name { 
    from { background-color: #5EB4FE;} 
    to {background-color: #fff;} 
} 
-moz-animation: your-animation-name 1s ease 0s 1 alternate !important; 
} 
@-moz-keyframes your-animation-name { 
    from { background-color: #5EB4FE;} 
    to {background-color: #fff;} 
} 
-ms-animation: your-animation-name 1s ease 0s 1 alternate !important; 
} 
@-ms-keyframes your-animation-name { 
    from { background-color: #5EB4FE;} 
    to {background-color: #fff;} 
} 
-o-animation: your-animation-name 1s ease 0s 1 alternate !important; 
} 
@-o-keyframes your-animation-name { 
    from { background-color: #5EB4FE;} 
    to {background-color: #fff;} 
} 
animation: your-animation-name 1s ease 0s 1 alternate !important; 
} 
@keyframes your-animation-name { 
    from { background-color: #5EB4FE;} 
    to {background-color: #fff;} 
} 

A continuación, cree un evento de clic jQuery que añade la clase your-animation al elemento que desee animar, lo que provocó el fondo la decoloración de un color a otro:

$(".some-button").click(function(e){ 
    $(".place-to-add-class").addClass("your-animation"); 
}); 

Answer 8

Sé que la pregunta era cómo hacerlo con jQuery, pero se puede lograr el mismo efecto con CSS simple y sólo un poco de jQuery ...

Por ejemplo, usted tiene un div con la clase de 'caja', añade el siguiente CSS

.box { 
background-color: black; 
-webkit-transition: background 0.5s linear; 
-moz-transition: background 0.5s linear; 
-ms-transition: background 0.5s linear; 
-o-transition: background 0.5s linear; 
transition: background 0.5s linear; 
} 

y luego usar la función AddClass añadir otra clase con diferente color de fondo como 'cuadro resaltado' o algo por el estilo con el siguiente CSS:

.box.highlighted { 
    background-color: white; 
} 

Soy un principiante y tal vez hay algunas desventajas de este método, pero tal vez va a ser útil para alguien

Aquí hay una codepen: https://codepen.io/anon/pen/baaLYB

Answer 9

Javascript fundido a blanco sin jQuery u otra biblioteca de:

<div id="x" style="background-color:rgb(255,255,105)">hello world</div> 
<script type="text/javascript"> 
var gEvent=setInterval("toWhite();", 100); 
function toWhite(){ 
    var obj=document.getElementById("x"); 
    var unBlue=10+parseInt(obj.style.backgroundColor.split(",")[2].replace(/\D/g,"")); 
    if(unBlue>245) unBlue=255; 
    if(unBlue<256) obj.style.backgroundColor="rgb(255,255,"+unBlue+")"; 
    else clearInterval(gEvent) 
} 
</script> 

En la impresión, el amarillo es azul menos, por lo que a partir de la tercera elemento rgb (azul) a menos de 255 comienza con un toque de luz amarilla. A continuación, el 10+ al establecer el valor var unBlue incrementa el menos azul hasta que alcanza 255.