Jak wyblaknąć / wyciszyć kolor tła za pomocą jQuery?

Odpowiedzi:

90

Ta dokładna funkcjonalność (3-sekundowa poświata do podświetlenia wiadomości) jest zaimplementowana w interfejsie użytkownika jQuery jako efekt podświetlenia

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

Kolor i czas trwania są zmienne

micmcg
źródło
53
$ ('newCommentItem'). efekt ("podświetlenie", {}, 3000);
Ravi Ram
5
Inny przykład, zmiana koloru: $ (element) .effect ("highlight", {color: 'blue'}, 3000);
Jorge Olivares
@RaviRam - idealnie!
kneidels
90

Jeśli chcesz specjalnie animować kolor tła elementu, uważam, że musisz dołączyć framework jQueryUI. Następnie możesz:

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

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

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

user113716
źródło
3
W tym celu musiałem uwzględnić „kolor jQuery”, który jest również w dokumentacji jquery ( „(na przykład szerokość, wysokość lub lewo mogą być animowane, ale kolor tła nie może być, chyba że używana jest wtyczka jQuery.Color)” ).
Boris
'slow'można zastąpić sekundami ... gdzie 1000 to 1 sekunda ... i tak dalej.
Pathros
25

Wiem, że chodziło o to, jak to zrobić za pomocą Jquery, ale ten sam efekt można osiągnąć za pomocą prostego css i tylko małego jquery ...

Na przykład, masz element div z klasą „box”, dodaj następujący plik 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ę z innym kolorem tła, na przykład „podświetlone pole” lub coś podobnego z następującym css:

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

Jestem początkującym i być może są wady tej metody, ale może komuś się przyda

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

NoDisplayName
źródło
Fajne rozwiązanie. Dziękuję Ci.
thedp
To świetne rozwiązanie, które działa bez dodatkowych bibliotek i jest natywnie obsługiwane we wszystkich nowoczesnych przeglądarkach. Dzięki!
rprez
14

Zwykle możesz użyć metody .animate () do manipulowania dowolnymi właściwościami CSS, ale w przypadku kolorów tła musisz użyć wtyczki kolorów . Po dołączeniu tej wtyczki możesz użyć czegoś, co wskazali inni, $('div').animate({backgroundColor: '#f00'})aby zmienić kolor.

Jak napisali inni, część z tego można zrobić również za pomocą biblioteki interfejsu użytkownika jQuery.

Ryan
źródło
9

Korzystanie tylko z jQuery (bez 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 jasność od 50% do 100%, zasadniczo powodując białe tło (możesz wybrać dowolną wartość w zależności od koloru).
  • SetTimeout jest opakowany w anonimową funkcję, aby działał poprawnie w pętli ( powód )
użytkownik
źródło
8

W zależności od obsługi Twojej przeglądarki możesz użyć animacji CSS. Przeglądarki obsługują IE10 i nowsze wersje dla animacji CSS. Jest to fajne, więc nie musisz dodawać zależności od interfejsu użytkownika jquery, jeśli jest to tylko małe jajko wielkanocne. Jeśli jest to integralna część Twojej witryny (czyli wymagana dla IE9 i starszych), skorzystaj z rozwiązania interfejsu użytkownika 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;}
}

Następnie utwórz zdarzenie jQuery click, które dodaje your-animationklasę do elementu, który chcesz animować, wywołując zanikanie tła z jednego koloru na drugi:

$(".some-button").click(function(e){
    $(".place-to-add-class").addClass("your-animation");
});
Rich Finelli
źródło
2
To zdecydowanie najlepsze rozwiązanie. Oto Demo w JSfiddle.net
Ricardo Zea
4

Napisałem super prostą wtyczkę jQuery, aby osiągnąć coś podobnego. Chciałem czegoś naprawdę lekkiego (to minifikacja 732 bajtów), więc włączenie dużej wtyczki lub interfejsu użytkownika było dla mnie wykluczone. Nadal jest trochę szorstki na krawędziach, więc opinie są mile widziane.

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

Korzystając z wtyczki, łatwo byłoby stworzyć efekt podświetlenia, zmieniając kolor tła, a następnie dodając, setTimeoutaby uruchomić wtyczkę, aby przywrócić pierwotny kolor tła.

Dominic P
źródło
Dominik P: dzięki za twoją „małą” wtyczkę. Dobrze pasuje do moich potrzeb!
psulek
3

Aby przejść między 2 kolorami za pomocą tylko prostego kodu 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

Curtis Yallop
źródło
0

javascript zmienia kolor na biały 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 kolor żółty jest minus niebieski, więc zaczynając od trzeciego elementu rgb (niebieskiego) poniżej 255 zaczyna się od żółtego podświetlenia. Następnie 10+ustawienie var unBluewartości zwiększa minus niebieski, aż osiągnie 255.

Gordon
źródło