Wie kann ich Textinhalte mit jQuery einblenden?
Es geht darum, den Benutzer auf die Nachricht aufmerksam zu machen.
jquery
css
background-color
fade
mrblah
quelle
quelle
Antworten:
Diese genaue Funktionalität (3 Sekunden langes Leuchten zum Hervorheben einer Nachricht) wird in der jQuery-Benutzeroberfläche als Hervorhebungseffekt implementiert
https://api.jqueryui.com/highlight-effect/
Farbe und Dauer sind variabel
quelle
Wenn Sie die Hintergrundfarbe eines Elements gezielt animieren möchten, müssen Sie meines Erachtens das jQueryUI-Framework einbeziehen. Dann können Sie tun:
jQueryUI verfügt über einige integrierte Effekte, die auch für Sie nützlich sein können.
http://jqueryui.com/demos/effect/
quelle
'slow'
kann durch Sekunden ersetzt werden ... wobei 1000 1 Sekunde entspricht ... und so weiter.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
Verwenden Sie dann die AddClass-Funktion, um eine weitere Klasse mit einer anderen Hintergrundfarbe wie "hervorgehobenes Feld" oder ähnlichem mit dem folgenden CSS hinzuzufügen:
Ich bin ein Anfänger und vielleicht gibt es einige Nachteile dieser Methode, aber vielleicht ist sie für jemanden hilfreich
Hier ist ein Codepen: https://codepen.io/anon/pen/baaLYB
quelle
Normalerweise können Sie die Methode .animate () verwenden, um beliebige CSS-Eigenschaften zu bearbeiten. Für Hintergrundfarben müssen Sie jedoch das Farb-Plugin verwenden . Sobald Sie dieses Plugin hinzugefügt haben, können Sie etwas verwenden, das andere angegeben haben
$('div').animate({backgroundColor: '#f00'})
, um die Farbe zu ändern.Wie andere geschrieben haben, kann ein Teil davon auch über die jQuery-UI-Bibliothek durchgeführt werden.
quelle
Nur jQuery verwenden (keine UI-Bibliothek / Plugin). Sogar jQuery kann leicht eliminiert werden
Demo: http://jsfiddle.net/5NB3s/2/
quelle
Abhängig von Ihrer Browserunterstützung können Sie eine CSS-Animation verwenden. Browser-Unterstützung ist IE10 und höher für CSS-Animation. Dies ist schön, so dass Sie keine Abhängigkeit von der Benutzeroberfläche von jquery hinzufügen müssen, wenn es sich nur um ein kleines Osterei handelt. Wenn es ein wesentlicher Bestandteil Ihrer Site ist (auch bekannt als IE9 und niedriger), wählen Sie die jquery UI-Lösung.
Erstellen Sie als Nächstes ein jQuery-Klickereignis, das die
your-animation
Klasse zu dem Element hinzufügt , das Sie animieren möchten, und das Ausblenden des Hintergrunds von einer Farbe zur anderen auslöst:quelle
Ich habe ein super einfaches jQuery-Plugin geschrieben, um etwas Ähnliches zu erreichen. Ich wollte etwas wirklich Leichtes (es sind 732 Bytes minimiert), daher kam das Einfügen eines großen Plugins oder einer Benutzeroberfläche für mich nicht in Frage. Es ist immer noch etwas rau an den Rändern, daher ist Feedback willkommen.
Sie können das Plugin hier auschecken: https://gist.github.com/4569265 .
Mit dem Plugin ist es ganz einfach, einen Hervorhebungseffekt zu erzielen, indem Sie die Hintergrundfarbe ändern und dann ein hinzufügen
setTimeout
, um das Plugin auszulösen und zur ursprünglichen Hintergrundfarbe zurückzukehren.quelle
So blenden Sie mit nur einfachem Javascript zwischen zwei Farben ein:
Quelle: http://www.pagecolumn.com/javascript/fade_text.htm
quelle
Javascript wird ohne jQuery oder eine andere Bibliothek zu Weiß ausgeblendet:
Beim Drucken ist Gelb minus Blau. Wenn Sie also mit dem 3. RGB-Element (Blau) bei weniger als 255 beginnen, beginnt dies mit einer gelben Markierung. Dann erhöht das
10+
Einstellen desvar unBlue
Wertes das Minusblau, bis es 255 erreicht.quelle