¿Cómo se fade in / out un color de fondo usando jQuery?

Question

¿Cómo se desvanecen en el contenido del texto con jQuery?

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

Answer 1

Esta funcionalidad exacta (3 segundos brillo para resaltar un mensaje) se implementa en el jQuery UI como el efecto más destacado

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

Color y duración son variables

Answer 2

Si desea animar específicamente el color de fondo de un elemento, creo que es necesario incluir 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

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 'caja' de clase, 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 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 voy a ser útil para alguien

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

Answer 4

Por lo general, se puede utilizar el .animate () método para manipular las propiedades CSS arbitrarias, pero para colores de fondo es necesario utilizar la de color plugin de . Una vez que se incluye este plugin, puede usar algo como otros han indicado $('div').animate({backgroundColor: '#f00'}) para cambiar el color.

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

Answer 5

Uso de jQuery solamente (sin interfaz de usuario de la biblioteca / plugin). 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 ligereza del 50% al 100%, lo que hace esencialmente 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 ( razón )

Answer 6

En función de su soporte de los navegadores, se puede usar una animación CSS. soporte de los navegadores es IE10 y hasta para la animación CSS. Esto es bueno por lo que no tiene que agregar la dependencia jQuery UI si es sólo un pequeño huevo de Pascua. Si es parte integral de su sitio (alias necesario para IE9 y por debajo) ir con la solución de 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 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 7

Me escribió una súper simple plugin de jQuery para lograr algo similar a esto. Yo quería algo de peso muy ligero (que es 732 bytes minified), por lo que incluir un gran plugin o interfaz de usuario estaba fuera de la cuestión para mí. Es todavía un poco áspero alrededor de los bordes, así que la regeneración es bienvenido.

Puedes retirar el plugin aquí:. https://gist.github.com/4569265

Usando el plugin, sería un asunto sencillo para crear un efecto de relieve, cambiando el color de fondo y luego añadir un setTimeout para disparar el plugin para desaparecer de nuevo al color de fondo original.

Answer 8

Para una transición gradual entre 2 colores usando javascript sólo es 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 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. Entonces el 10+ en el establecimiento del valor var unBlue incrementa el azul menos hasta que alcanza 255.