Wie verbinde ich eine Hintergrundfarbe mit jquery?

Question

Wie verbinde ich Textinhalt mit jQuery?

Der Punkt ist, den Benutzer auf die Nachricht aufmerksam zu machen.

Answer 1

Diese exakte Funktionalität (3 Sekunden leuchtet eine Nachricht markieren) in dem jQuery UI als Highlight-Effekt

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

Farbe und Dauer ist variabel

Answer 2

Wenn Sie speziell die Hintergrundfarbe eines Elements animieren möchten, müssen Sie, glaube ich, ein jQueryUI-Framework einbeziehen. Dann können Sie tun:

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

jQueryUI hat einige eingebaute Effekte, die auch für Sie nützlich sein können.

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

Answer 3

Regel implementiert Sie können die Methode .animate() verwenden, um beliebige CSS-Eigenschaften zu bearbeiten, aber für Hintergrundfarben müssen Sie color plugin verwenden. Sobald Sie dieses Plugin hinzugefügt haben, können Sie etwas verwenden, wie andere $('div').animate({backgroundColor: '#f00'}) angegeben haben, um die Farbe zu ändern.

Wie andere bereits beschrieben haben, können einige davon auch mithilfe der jQuery UI-Bibliothek ausgeführt werden.

Answer 4

zwischen zwei Farben verblassen nur einfach mit Hilfe von 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); 

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

Answer 5

ich eine super einfach jQuery-Plugin schrieb dies etwas ähnliches zu erreichen. Ich wollte etwas wirklich leichtes (es ist 732 Bytes minimiert), so dass ein großes Plugin oder UI für mich nicht in Frage kam. Es ist immer noch ein wenig rauh an den Rändern, daher ist Feedback willkommen.

Sie können das Plugin hier überprüfen: https://gist.github.com/4569265.

Mit dem Plugin wäre es einfach, einen Highlight-Effekt zu erstellen, indem Sie die Hintergrundfarbe ändern und dann ein setTimeout hinzufügen, um das Plugin auf die ursprüngliche Hintergrundfarbe zurück zu blenden.

Answer 6

Nur jQuery verwenden (keine UI-Bibliothek/Plugin). Selbst jQuery leicht

//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 eliminiert werden: http://jsfiddle.net/5NB3s/2/

• SetTimeout erhöht die Helligkeit von 50% bis 100%, im Wesentlichen macht der Hintergrund weiß (Sie einen beliebigen Wert wählen können auf Ihrer Farbe abhängig).
• SetTimeout in einer anonymen Funktion eingewickelt wird es in einer Schleife um richtig zu arbeiten (reason)

Answer 7

auf Ihrer Browser-Unterstützung Je könnten Sie eine CSS-Animation verwenden. Browser-Unterstützung ist IE10 und höher für CSS-Animation. Das ist nett, also müssen Sie keine jquery UI-Abhängigkeit hinzufügen, wenn es nur ein kleines Osterei ist.Wenn es integraler Bestandteil Ihrer Website ist (auch für IE9 und darunter erforderlich), verwenden Sie die jquery UI-Lösung.

.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;} 
} 

Nächstes ein jQuery click-Ereignis erstellen, das die your-animation Klasse auf das Element fügt Sie, die Auslösung der Hintergrund Fading von einer Farbe zur anderen animieren wollen:

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

Answer 8

Ich weiß, dass die Frage war, wie zu tun es mit jQuery, aber man kann das gleiche beeinflusst mit einfachen CSS und nur ein wenig jquery ... erreichen

zum Beispiel Sie mit einem div haben ‚Box‘ Klasse, fügen Sie die CSS folgenden

.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; 
} 

und verwenden Sie dann AddClass Funktion eine andere Klasse mit unterschiedlichen Hintergrundfarbe hinzufügen wie ‚Feld markiert‘ oder so ähnlich mit folgendem CSS:

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

Ich bin ein Anfänger und vielleicht gibt es einige Nachteile diese Methode aber vielleicht wird es für jemanden

hier ein codepen hilfreich sein: https://codepen.io/anon/pen/baaLYB

Answer 9

Javascript verblassen zu weiß ohne jQuery oder andere Bibliothek:

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

Beim Drucken ist gelb minus blau, so mit dem 3. rgb ab Elemente (blau) bei weniger als 255 beginnt mit einem gelben Highlight. Dann die in die Einstellung var unBlue Wert erhöht das Minus-Blau, bis es 255 erreicht.