W jaki sposób wprowadzasz/wygaszasz kolor tła za pomocą jquery?

Question

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

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

Answer 1

Ta dokładna funkcjonalność (3 sekundy blask, aby podświetlić wiadomość) jest zaimplementowana w jQuery UI jako efekt podświetlenia

http://docs.jquery.com/UI/Effects/Highlight

Kolor i czas trwania są zmienne

Answer 2

Jeśli chcesz w szczególności animować kolor tła elementu, uważam, że musisz uwzględnić framework jQueryUI. Następnie możesz zrobić:

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

jQueryUI ma pewne wbudowane efekty, które mogą ci się przydać.

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

Answer 3

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

Jak napisali inni, niektóre z nich można również zrobić przy użyciu biblioteki jQuery UI.

Answer 4

Aby przejść między 2 kolory używając tylko prosty skrypt:

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

Answer 5

pisałem super prosty plugin jQuery, aby osiągnąć coś podobnego do tego. Chciałem czegoś naprawdę lekkiego (minęło 732 bajty), więc dołączenie dużej wtyczki lub interfejsu użytkownika nie wchodziło w grę. Nadal jest trochę szorstko, więc opinie są mile widziane.

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

Za pomocą wtyczki łatwo byłoby stworzyć efekt podświetlenia, zmieniając kolor tła, a następnie dodając setTimeout, aby uruchomić wtyczkę, aby przywrócić oryginalny kolor tła.

Answer 6

Używanie wyłącznie jQuery (bez biblioteki UI/wtyczki). 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ść od 50% do 100%, głównie dzięki czemu białe tło (można wybrać dowolną wartość w zależności od koloru).
• setTimeout jest owinięty w anonimowej funkcji na to, aby prawidłowo pracować w pętli (reason)

Answer 7

zależności od wsparcia przeglądarki, można użyć animacji CSS. Obsługa przeglądarki to IE10, a do animacji CSS. To jest miłe, więc nie musisz dodawać zależności JQuery, jeśli jest to tylko małe pisanie wielkanocne.Jeśli jest integralną częścią Twojej witryny (potrzebną również w IE9 i poniżej), przejdź do rozwiązania 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ępny utworzyć zdarzenie click jQuery, który dodaje klasę your-animation do elementu, który chcesz animować, wywołując tło blaknięcie od jednego koloru do drugiego:

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

Answer 8

Wiem, że pytanie było jak zrobić to z jQuery, ale można osiągnąć taki sam wpływ z prostych CSS i tylko trochę jQuery ...

na przykład, masz div z klasy „box”, należy dodać następujące 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 dodać kolejną klasę z innym kolorem tła jak „pole podświetlone” lub coś podobnego z następującym css:

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

Jestem początkujący i może istnieją pewne wady metoda ta jednak może to będzie pomocne dla kogoś

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

Answer 9

javascript blaknięcie do białego bez jQuery lub inne 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 drukowaniu, żółty jest minus niebieski, więc wychodząc z 3-ej strefy RGB (niebieski) na mniej niż 255 rozpoczyna się z żółtym podświetleniem. Następnie 10+ w ustawianiu wartości var unBlue zwiększa wartość minus niebieski, aż osiągnie 255.