Wie blendet man eine Hintergrundfarbe mit jquery ein/aus?

Wie blende ich Textinhalte mit jQuery ein?

Es geht darum, die Aufmerksamkeit des Benutzers auf die Nachricht zu lenken.

Wenn Sie die Hintergrundfarbe eines Elements speziell animieren möchten, müssen Sie meines Erachtens das jQueryUI-Framework einbeziehen. Dann können Sie Folgendes 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/

Genau diese Funktionalität (3-sekündiges Leuchten zum Hervorheben einer Nachricht) ist in der jQuery-Benutzeroberfläche als Highlight-Effekt implementiert

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

Farbe und Dauer sind variabel

Ich weiß, dass die Frage war, wie man es mit Jquery macht, aber Sie können den gleichen Effekt mit einfachem CSS und nur ein wenig Jquery erzielen …

Wenn Sie beispielsweise ein div mit der Klasse „box“ haben, fügen Sie das folgende CSS hinzu

.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 die AddClass-Funktion, um eine weitere Klasse mit einer anderen Hintergrundfarbe hinzuzufügen, z. B. “Feld hervorgehoben” oder ähnliches mit dem folgenden CSS:

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

Ich bin ein Anfänger und vielleicht gibt es einige Nachteile dieser Methode, aber vielleicht ist es für jemanden hilfreich

Hier ist ein Codestift:
https://codepen.io/anon/pen/baaLYB

In der Regel können Sie die verwenden .animieren() -Methode, um beliebige CSS-Eigenschaften zu manipulieren, aber für Hintergrundfarben müssen Sie die verwenden Farb-Plugin. Sobald Sie dieses Plugin eingebunden haben, können Sie etwas verwenden, was andere angegeben haben $('div').animate({backgroundColor: '#f00'}) um die Farbe zu ändern.

Wie andere geschrieben haben, kann ein Teil davon auch mit der jQuery-UI-Bibliothek durchgeführt werden.

Nur jQuery verwenden (keine UI-Bibliothek/Plugin). Sogar jQuery kann leicht eliminiert werden

//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 erhöht die Helligkeit von 50 % auf 100 %, wodurch der Hintergrund im Wesentlichen weiß wird (Sie können je nach Farbe einen beliebigen Wert auswählen).
• SetTimeout ist in eine anonyme Funktion eingeschlossen, damit es in einer Schleife richtig funktioniert ( Grund )

Abhängig von der Unterstützung Ihres Browsers können Sie eine CSS-Animation verwenden. Browserunterstützung ist IE10 und höher für CSS-Animation. Das ist nett, damit Sie keine jquery-UI-Abhängigkeit hinzufügen müssen, wenn es nur ein kleines Osterei ist. Wenn es ein integraler Bestandteil Ihrer Website ist (auch bekannt als 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;}
}

Erstellen Sie als Nächstes ein jQuery-Klickereignis, das die hinzufügt your-animation Klasse zu dem Element, das Sie animieren möchten, wodurch der Hintergrund von einer Farbe zur anderen übergeht:

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

Ich habe ein supereinfaches jQuery-Plugin geschrieben, um etwas Ähnliches zu erreichen. Ich wollte etwas wirklich Leichtes (es sind 732 Byte verkleinert), also kam das Einbinden eines großen Plugins oder einer großen Benutzeroberfläche für mich nicht in Frage. Es ist immer noch ein wenig rau an den Rändern, daher ist Feedback willkommen.

Sie können das Plugin hier auschecken: https://gist.github.com/4569265.

Mit dem Plugin wäre es eine einfache Sache, einen Hervorhebungseffekt zu erzeugen, indem man die Hintergrundfarbe ändert und dann eine hinzufügt setTimeout um das Plugin auszulösen, um zur ursprünglichen Hintergrundfarbe zurückzukehren.