Como você fade in / out uma cor de fundo usando jquery?

Como faço para desaparecer no conteúdo de texto com jQuery?

O objetivo é chamar a atenção do usuário para a mensagem.

Esta funcionalidade exata (brilho de 3 segundos para destacar uma mensagem) é implementada na UI do jQuery como o efeito de destaque

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

Cor e duração são variáveis

Se você deseja animar especificamente a cor de fundo de um elemento, acredito que precisa incluir a estrutura jQueryUI. Então você pode fazer:

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

jQueryUI tem alguns efeitos embutidos que podem ser úteis para você também.

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

Eu sei que a questão era como fazer isso com Jquery, mas você pode conseguir o mesmo efeito com CSS simples e apenas um pouco de jquery ...

Por exemplo, você tem um div com a classe 'box', adicione o seguinte 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;
}

e, em seguida, use a função AddClass para adicionar outra classe com cor de fundo diferente como 'caixa destacada' ou algo parecido com o seguinte css:

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

Eu sou um iniciante e talvez haja algumas desvantagens desse método, mas talvez seja útil para alguém

Aqui está um codepen: https://codepen.io/anon/pen/baaLYB

Normalmente você pode usar o método .animate () para manipular propriedades CSS arbitrárias, mas para cores de fundo você precisa usar o plugin de cores . Depois de incluir este plugin, você pode usar algo como outros indicaram $('div').animate({backgroundColor: '#f00'})para alterar a cor.

Como outros escreveram, parte disso pode ser feito usando a biblioteca jQuery UI também.

Usando apenas jQuery (sem biblioteca / plugin de IU). Até o jQuery pode ser facilmente 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);
}

Demo: http://jsfiddle.net/5NB3s/2/

• SetTimeout aumenta a luminosidade de 50% a 100%, essencialmente tornando o fundo branco (você pode escolher qualquer valor dependendo da sua cor).
• SetTimeout está envolvido em uma função anônima para funcionar corretamente em um loop ( motivo )

Dependendo do suporte do seu navegador, você pode usar uma animação css. O suporte do navegador é IE10 e superior para animação CSS. Isso é bom para que você não precise adicionar dependência da interface do usuário do jquery se for apenas um pequeno ovo de páscoa. Se for parte integrante do seu site (também conhecido como necessário para o IE9 e inferior), vá com a solução de interface do usuário 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;}
}

Em seguida, crie um evento click jQuery que adiciona a your-animationclasse ao elemento que você deseja animar, disparando o desbotamento do plano de fundo de uma cor para outra:

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

Eu escrevi um plugin jQuery super simples para realizar algo semelhante a este. Eu queria algo realmente leve (são 732 bytes reduzidos), então incluir um grande plugin ou interface do usuário estava fora de questão para mim. Ainda é um pouco difícil nas bordas, então o feedback é bem-vindo.

Você pode verificar o plug-in aqui: https://gist.github.com/4569265 .

Usando o plug-in, seria uma questão simples criar um efeito de destaque alterando a cor de fundo e, em seguida, adicionando um setTimeoutpara disparar o plug-in para voltar à cor de fundo original.

Para esmaecer entre 2 cores usando apenas javascript simples:

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

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

javascript fade to white sem jQuery ou outra 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>

Na impressão, o amarelo é menos azul, portanto, começar com o terceiro elemento rgb (azul) em menos de 255 começa com um destaque amarelo. Então, a 10+configuração do var unBluevalor aumenta o azul menos até atingir 255.