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

¿Cómo se desvanece el contenido de texto con jQuery?

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

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

https://api.jqueryui.com/highlight-effect/

El color y la duración son variables

Si desea animar específicamente el color de fondo de un elemento, creo que debe incluir el marco jQueryUI. Entonces puedes hacer:

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

jQueryUI tiene algunos efectos incorporados que también pueden serle útiles.

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

Sé que la pregunta era cómo hacerlo con Jquery, pero puedes lograr el mismo efecto con CSS simple y solo un poco de jquery ...

Por ejemplo, tiene un div con la clase 'box', agregue 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 use la función AddClass para agregar otra clase con un color de fondo diferente como 'cuadro resaltado' o algo así con el siguiente CSS:

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

Soy un principiante y tal vez haya algunas desventajas de este método, pero tal vez sea útil para alguien.

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

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

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

Usando solo jQuery (sin biblioteca / complemento de UI). Incluso jQuery se puede eliminar fácilmente

//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 luminosidad del 50% al 100%, esencialmente haciendo que el fondo sea blanco (puede elegir cualquier valor según su color).
• SetTimeout está envuelto en una función anónima para que funcione correctamente en un bucle ( razón )

Dependiendo de la compatibilidad de su navegador, puede usar una animación CSS. El soporte del navegador es IE10 y superior para la animación CSS. Esto es bueno para que no tenga que agregar la dependencia de la interfaz de usuario de jquery si es solo un pequeño huevo de Pascua. Si es parte integral de su sitio (también conocido como necesario para IE9 y versiones anteriores), elija la solución jquery UI.

.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 de jQuery que agregue la your-animationclase al elemento que desea animar, activando el desvanecimiento del fondo de un color a otro:

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

Escribí un complemento jQuery súper simple para lograr algo similar a esto. Quería algo realmente liviano (tiene 732 bytes minificados), por lo que incluir un gran complemento o interfaz de usuario estaba fuera de discusión para mí. Todavía es un poco irregular, por lo que los comentarios son bienvenidos.

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

Con el complemento, sería muy sencillo crear un efecto de resaltado cambiando el color de fondo y luego agregando un setTimeoutpara activar el complemento para que vuelva al color de fondo original.

Para difuminar entre 2 colores usando solo 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

javascript se desvanece a blanco sin jQuery u otra biblioteca:

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

Al imprimir, el amarillo es menos azul, por lo que comenzar con el tercer elemento rgb (azul) en menos de 255 comienza con un resaltado amarillo. Luego, la 10+configuración del var unBluevalor aumenta el azul menos hasta que llega a 255.