Como você fade in / out uma cor de fundo usando jQuery?
-
13-09-2019 - |
Pergunta
Como faço para desaparecer no conteúdo de texto com jQuery?
O objetivo é chamar a atenção do usuário para a mensagem.
Solução
Esta funcionalidade exata (3 segundo brilho para destacar uma mensagem) é implementado no jQuery UI como o efeito destaque
https://api.jqueryui.com/highlight-effect/
Cor e duração são variáveis ??
Outras dicas
Se você deseja animar especificamente a cor de fundo de um elemento, eu acredito que você precisa incluir quadro jQueryUI. Então você pode fazer:
$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');
jQueryUI tem algum built-in efeitos que podem ser úteis para você também.
Eu sei que a questão era como fazê-lo com jQuery, mas você pode conseguir o mesmo efeito com css simples e um pouco jquery ...
Por exemplo, você tem um div com a classe 'caixa', 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, usar a função AddClass para adicionar outra classe com cor diferente do fundo como 'caixa realçada' ou algo parecido com o seguinte CSS:
.box.highlighted {
background-color: white;
}
Eu sou um novato e talvez haja algumas desvantagens deste método, mas talvez ele vai ser útil para alguém
Aqui está uma codepen: https://codepen.io/anon/pen/baaLYB
Normalmente, você pode usar o .animate () método para manipular as propriedades CSS arbitrárias, mas para cores de fundo que você precisa para usar a cor plug-in . Uma vez que você incluir este plugin, você pode usar algo como outros têm $('div').animate({backgroundColor: '#f00'})
indicada para mudar a cor.
Como outros têm escritos, alguns isso pode ser feito usando a biblioteca jQuery UI também.
Usando apenas jQuery (nenhuma biblioteca UI / plug-in). Mesmo 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);
}
Demonstração: 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 é envolto em uma função anônima para que ele funcione corretamente em um loop ( razão )
Dependendo apoio do seu navegador, você pode usar uma animação css. O suporte ao navegador é IE10 e até para a animação CSS. Isso é bom para que você não tem que adicionar a dependência jQuery UI se o seu apenas um pequeno ovo de páscoa. Se ele é parte integrante de seu site (aka necessário para IE9 e abaixo) ir com a solução 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;}
}
Em seguida, crie um evento de clique jQuery que adiciona a classe your-animation
ao elemento que você deseja animar, provocando o fundo de desvanecimento de uma cor para outra:
$(".some-button").click(function(e){
$(".place-to-add-class").addClass("your-animation");
});
Eu escrevi um jQuery super simples plug-in para realizar algo semelhante a este. Eu queria algo peso muito leve (é 732 bytes minified), assim incluindo um grande plugin ou UI estava fora de questão para mim. Ainda é um pouco áspero em torno das bordas, para que o feedback é bem-vinda.
Você pode verificar o plugin aqui:. https://gist.github.com/4569265
Usando o plugin, seria uma simples questão de criar um efeito de destaque mudando a cor de fundo e, em seguida, adicionar um setTimeout
para disparar o plugin a desvanecer-se de volta para a cor de fundo original.
Para desaparecer entre 2 cores usando javascript única 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);
javascript fade to branco 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, assim que começar com o terceiro elemento rgb (azul) a menos de 255 começa com um destaque amarelo. Em seguida, a 10+
na definição dos incrementos de valor var unBlue
o azul menos até atingir 255.