Jak fade in / out a background color using jquery?

Jeśli chcesz konkretnie animować kolor tła elementu, uważam, że musisz dołączyć jQueryUI framework. Wtedy możesz zrobić:

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

JQueryUI ma kilka wbudowanych efektów, które mogą być przydatne dla Ciebie, jak również.

Http://jqueryui.com/demos/effect/

Wiem, że pytaniem było, jak to zrobić z Jquery, ale można osiągnąć ten sam wpływ z prostym css i tylko trochę jquery...

Na przykład, masz div z klasą 'box', Dodaj następujący 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;
}

A następnie użyj funkcji AddClass, aby dodać kolejną klasę o innym kolorze tła, np. 'pole podświetlone' lub coś w tym stylu za pomocą następującego css:

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

Oto kod: https://codepen.io/anon/pen/baaLYB

Zazwyczaj można użyć .metoda animate () do manipulowania dowolnymi właściwościami CSS, ale dla kolorów tła należy użyć wtyczki color . Po dołączeniu tej wtyczki możesz użyć czegoś takiego, jak inne wskazały $('div').animate({backgroundColor: '#f00'}), aby zmienić kolor.

Jak pisali inni, część z tego można zrobić również za pomocą biblioteki jQuery UI.

Używanie tylko jQuery(brak biblioteki/wtyczki UI). Nawet jQuery można łatwo wyeliminować

//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 zwiększa lekkość z 50% do 100%, zasadniczo czyniąc tło białym(możesz wybrać dowolną wartość w zależności od koloru).
SetTimeout jest zapakowany w funkcję anonimową, aby działała poprawnie w pętli (reason )

W zależności od obsługi przeglądarki, możesz użyć animacji css. Obsługa przeglądarki to IE10 i więcej dla animacji CSS. Jest to miłe, więc nie musisz dodawać zależności jQuery UI, jeśli jest to tylko małe jajko wielkanocne. Jeśli jest integralną częścią witryny (aka potrzebne dla IE9 i poniżej) przejdź z rozwiązaniem 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;}
}

Następnie utwórz Zdarzenie kliknięcia jQuery, które dodaje klasę your-animation do elementu, który chcesz animować, powodując blaknięcie tła z jednego koloru na drugi:

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

Napisałem super prosty plugin jQuery, aby osiągnąć coś podobnego do tego. Chciałem coś naprawdę lekkiego (to 732 bajtów minified), więc w tym duży plugin lub UI było nie wchodzi w grę dla mnie. Nadal jest trochę szorstki na krawędziach, więc opinie są mile widziane.

Możesz sprawdzić wtyczkę tutaj: https://gist.github.com/4569265 .

Używając wtyczki, łatwo byłoby stworzyć efekt podświetlenia zmieniając kolor tła, a następnie dodanie setTimeout do odpalenia wtyczki, aby przywrócić oryginalny kolor tła.

Aby zanikać pomiędzy 2 kolorami używając tylko prostego 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);

Źródło: http://www.pagecolumn.com/javascript/fade_text.htm

Javascript fade to white bez jQuery lub innej biblioteki:

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

W druku żółty jest minus Niebieski, więc zaczynając od 3. elementu rgb (niebieskiego) poniżej 255 zaczyna się od żółtego podświetlenia. Następnie 10+ w ustawieniu {[2] } wartość zwiększa minus niebieski, aż osiągnie 255.