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

jquery ui fade effect

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

Dependiendo de la compatibilidad de su navegador, 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 de jQuery que agregue la clase de your-animation al elemento que desea animar, desencadenando el desvanecimiento de fondo de un color a otro:

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

Answer 2

Escribí un complemento jQuery muy simple 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 complemento aquí: https://gist.github.com/4569265 .

Con el complemento, crear un efecto resaltado cambiando el color de fondo y luego agregar un setTimeout para disparar el complemento para volver al color de fondo original setTimeout una setTimeout .

Answer 3

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

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

El color y la duración son variables

Answer 4

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

Answer 5

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

Por ejemplo, tiene un div con 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 diferente color de fondo como ''recuadro resaltado'' o algo así 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 sea útil para alguien

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

Answer 6

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 pueden serle útiles.

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

Answer 7

Solo con 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 ( reason )

Answer 8

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

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

Answer 9

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>

En la impresión, el amarillo es menos azul, por lo que comenzar con el tercer elemento rgb (azul) a menos de 255 comienza con un resaltado amarillo. Luego, el valor 10+ al establecer el valor de var unBlue incrementa el menos azul hasta que alcanza 255.