Come fai a sfumare in / out un colore di sfondo usando jquery?

Come faccio a sfumare il contenuto di testo con jQuery?

Il punto è attirare l'attenzione dell'utente sul messaggio.

Questa funzionalità esatta (bagliore di 3 secondi per evidenziare un messaggio) è implementata nell'interfaccia utente di jQuery come effetto di evidenziazione

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

Il colore e la durata sono variabili

Se vuoi animare in modo specifico il colore di sfondo di un elemento, credo che tu debba includere il framework jQueryUI. Quindi puoi fare:

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

jQueryUI ha alcuni effetti incorporati che potrebbero esserti utili anche.

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

So che la domanda era come farlo con Jquery, ma puoi ottenere lo stesso effetto con semplici css e solo un po 'di jquery ...

Ad esempio, hai un div con la classe 'box', aggiungi 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 usa la funzione AddClass per aggiungere un'altra classe con un colore di sfondo diverso come 'box evidenziato' o qualcosa di simile 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 puoi usare il metodo .animate () per manipolare proprietà CSS arbitrarie, ma per i colori di sfondo devi usare il plugin color . Una volta incluso questo plugin, puoi usare qualcosa come altri hanno indicato $('div').animate({backgroundColor: '#f00'})per cambiare il colore.

Come altri hanno scritto, alcune di queste operazioni possono essere eseguite anche utilizzando la libreria jQuery UI.

Utilizzando solo jQuery (nessuna libreria / plugin dell'interfaccia utente). 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 luminosità dal 50% al 100%, essenzialmente rendendo lo sfondo bianco (puoi scegliere qualsiasi valore a seconda del tuo colore).
• SetTimeout è racchiuso in una funzione anonima affinché funzioni correttamente in un ciclo ( motivo )

A seconda del supporto del browser, è possibile utilizzare un'animazione CSS. Il supporto del browser è IE10 e versioni successive per l'animazione CSS. Questo è carino, quindi non devi aggiungere la dipendenza dell'interfaccia utente jquery se è solo un piccolo easter egg. Se è parte integrante del tuo sito (ovvero necessario per IE9 e versioni precedenti), utilizza la soluzione dell'interfaccia utente 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;}
}

Quindi crea un evento click jQuery che aggiunge la your-animationclasse all'elemento che desideri animare, attivando lo sfondo che sbiadisce da un colore all'altro:

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

Ho scritto un semplicissimo plugin jQuery per realizzare qualcosa di simile a questo. Volevo qualcosa di veramente leggero (è 732 byte minimizzati), quindi includere un grande plugin o un'interfaccia utente era fuori questione per me. È ancora un po 'approssimativo, quindi il feedback è il benvenuto.

Puoi controllare il plugin qui: https://gist.github.com/4569265 .

Utilizzando il plug-in, sarebbe semplice creare un effetto di evidenziazione cambiando il colore di sfondo e quindi aggiungendo un setTimeoutper attivare il plug-in per tornare al colore di sfondo originale.

Per sfumare tra 2 colori utilizzando solo un 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);

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

javascript dissolvenza in 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, quindi a partire dal terzo elemento rgb (blu) a meno di 255 inizia con un'evidenziazione gialla. Quindi l' 10+impostazione del var unBluevalore aumenta il meno blu fino a raggiungere 255.