Come si fa a fade in / out un colore di sfondo utilizzando jQuery?
-
13-09-2019 - |
Domanda
Come faccio a svanire nel contenuto di testo con jQuery?
Il punto è quello di attirare l'attenzione dell'utente al messaggio.
Soluzione
Questa funzionalità esatto (3 secondi bagliore per evidenziare un messaggio) è implementato nel jQuery UI come l'effetto di evidenziazione
https://api.jqueryui.com/highlight-effect/
Colore e la durata sono variabili
Altri suggerimenti
Se si desidera animare in particolare il colore di un elemento di fondo, credo che è necessario includere framework jQueryUI. Poi si può fare:
$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');
jQueryUI ha alcuni effetti incorporati che possono essere utili anche a voi.
So che la questione era come farlo con jQuery, ma è possibile ottenere lo stesso effetto con la semplice css e solo un po jquery ...
Ad esempio, si ha un div con 'box' di classe, aggiungere il seguente 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 quindi utilizzare la funzione AddClass per aggiungere un'altra classe con colore di sfondo diverso come 'scatola ha evidenziato' o qualcosa del genere con il seguente CSS:
.box.highlighted {
background-color: white;
}
Sono un principiante e forse ci sono alcuni svantaggi di questo metodo, ma forse sarà utile per qualcuno
Ecco un codepen: https://codepen.io/anon/pen/baaLYB
Di solito è possibile utilizzare il .animate () Metodo di manipolare le proprietà CSS arbitrarie, ma per colori di sfondo è necessario utilizzare il colore plug . Una volta che si include questo plugin, è possibile usare qualcosa come altri hanno indicato $('div').animate({backgroundColor: '#f00'})
per modificare il colore.
Come altri hanno scritto, una parte di questo può essere fatto utilizzando la libreria jQuery UI pure.
Utilizzando jQuery solo (senza UI Library / plugin). Anche jQuery può essere facilmente eliminato
//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 la leggerezza dal 50% al 100%, in sostanza, rendendo il fondo bianco (si può scegliere qualsiasi valore a seconda del colore).
- SetTimeout è avvolto in una funzione anonima per farlo funzionare correttamente in un ciclo ( motivo )
A seconda del supporto del browser, è possibile utilizzare un CSS Animations. supporto del browser è IE10 e per l'animazione CSS. Questo è bello quindi non c'è bisogno di aggiungere jQuery UI dipendenza se il suo solo un piccolo uovo di Pasqua. Se è parte integrante del vostro sito (aka necessario per IE9 e sotto) andare con la soluzione di 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;}
}
Avanti creare un evento click jQuery che aggiunge la classe your-animation
all'elemento che si desidera animare, innescando lo sfondo dissolvenza da un colore all'altro:
$(".some-button").click(function(e){
$(".place-to-add-class").addClass("your-animation");
});
ho scritto un super semplice plugin jQuery per realizzare qualcosa di simile a questo. Volevo qualcosa di peso molto leggero (è 732 byte minified), in modo tra cui una grande plugin o UI era fuori questione per me. E 'ancora un po' ruvida intorno ai bordi, quindi il feedback è benvenuto.
È possibile checkout il plugin qui:. https://gist.github.com/4569265
L'iPhone, sarebbe una semplice questione di creare un effetto di evidenziazione cambiando il colore di sfondo e poi l'aggiunta di un setTimeout
a fuoco il plugin per svanire di nuovo al colore di sfondo originale.
Per dissolvere tra 2 colori utilizzando solo semplice javascript:
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 dissolvenza al bianco, senza jQuery o altra libreria:
<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>
Nella stampa, il giallo è meno blu, in modo da cominciare con l'elemento rgb 3 ° (blu) a meno di 255 inizia con un punto culminante di colore giallo. Poi il 10+
nella determinazione del valore var unBlue
incrementa il blu meno fino a raggiungere 255.