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

Jak zmienić zawartość tekstu za pomocą jQuery?

Chodzi o to, aby zwrócić uwagę użytkownika na przekaz.

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

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/

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

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.

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 )

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");
});

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.

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

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.