Sanfte Änderung der Hintergrundfarbe. Wie Hintergrundfarbe ändern: nach Pseudo-Klasse mit jQuery? Jquery ändert die Farbe

In dieser Lektion werden wir über den Effekt sprechen, bei dem sich der Hintergrund eines Objekts sanft ändert, wenn der Mauszeiger darüber bewegt wird.
Wie Sie sich wahrscheinlich bereits daran gewöhnt haben (falls Sie die jQuery-Bibliothek nicht zum ersten Mal verwenden), verbinden wir zunächst jQuery mit unserer Website.
Zusätzlich zu jQuery selbst benötigen wir auch die jQuery-Benutzeroberfläche.

Wenn Sie mit den jQuery-Prinzipien vertraut sind, sollten Sie bedenken, dass wir im Header den Aufrufcode, in diesem Fall die Farbwechselanimation, platzieren müssen, damit er geladen wird, bevor der Hauptinhalt der Seite geladen wird. $(document).ready(function() ( // Geben Sie hier Ihren Animationsaufrufcode ein ));

HTML

Hier ist ein Beispiel für HTML-Markup.

Ändern der Hintergrundfarbe eines Elements Animation des Farbwechsels beim Hover / PC-Spiele / Portal 2 Portal 2

Das ursprüngliche Portal ist bereits Kult und für seine Zeit unerwartet. Es bestätigt nur noch einmal die bewährte These vom Siegeszug der Ideen über fortschrittliche Technologien.

CSS

Die CSS-Stile für unsere Seite sehen so aus.

Png); text-align:left; Farbe:#333; Breite:800px; Schriftgröße:14px; Schriftfamilie:Georgia, „Time New Romances“, Serife; Rand:0 automatisch; Polsterung:0; ) a( color:#333; text-decoration:none ) a:focus ( outline: none; ) h1 ( Schriftgröße: 34px; Schriftfamilie: Verdana, Helvetica, Arial, Sans-Serif; Buchstabenabstand:- 2px; Farbe:#394BEA; Schriftstärke:700; Polsterung:20px 0 0; Textschatten:0 1px 1px #70C5ED; ) h2 ( Schriftgröße: 24px; Schriftfamilie: Verdana, Helvetica, Arial, Sans- Serif; Farbe:#5C81CB; Schriftstärke: 400; Polsterung: 0 0 10px; Textschatten:0 1px 1px #70C5ED; ) h3, h3 a( Schriftgröße:14px; Schriftfamilie:verdana, helvetica, arial , serifenlos; Buchstabenabstand:-1px; Farbe:#333; Schriftstärke: 700; Texttransformation:Großbuchstaben; Rand:0; Polsterung:8px 0 8px 0; ) p ( Farbe:#333; Float: left; line-height:22px; margin:5px; padding:0 0 10px; ) #container ( margin: 0; padding: 0; ) .boxes ( background:#fff; border:1px solid #ccc; float:left; padding:10px; position:relative; width:600px; ) img ( border:5px solid #CCCCCC; ) div.info ( border-bottom:1px solid #CCCCCC; float:left; margin:0; padding:0; width: 100 %; ) .block ( color:#0066CC; float:left; Überlauf versteckt; Position:relativ; Breite:600px; ) .block h4, .block h4 a( color:#333333; Schriftgröße:11px; padding:5px 0; text-shadow:0 1px 1px #CEDEFD; text-transform:uppercase; )

JS

Ein DIV-Element mit der Klasse .boxes ist das Element, der Block, dessen Farbe wir ändern möchten.
Dies ist der Code, den wir im Header aufrufen werden.

$(document).ready(function())( $(".boxes").hover(function() ( $(this).stop().animate(( backgroundColor: "#40B8FE"), 800); ) , function() ( $(this).stop().animate(( backgroundColor: "#ffffff" ), 800); )); )); Die Parameter „backgroundColor“ legen die Farbe fest und der Wert 800 ist die Animationsgeschwindigkeit.

Es gibt eine Ebene mit Text und einer Schaltfläche. Wenn Sie darauf klicken, müssen Sie die Farbe des Textes auf dieser Ebene ändern.

Farbe ändern (jQuery) $(document).ready(function())( $("#color_change").click(function())( $("#layer").css("color", "#F00" ); )) )); #layer (border:#CCC 1px solid; line-height:1.5; padding:10px 20px; width:800px; margin-top:20px;) Aber damit Sie verstehen, woher dieses Missverständnis von Menschen kommt, die Vergnügen verurteilen und Schmerz loben Ich werde Ihnen das ganze Bild offenbaren und genau erklären, was dieser Mann gesagt hat, der die Wahrheit entdeckt hat und den ich den Architekten eines glücklichen Lebens nennen würde. Tatsächlich lehnt niemand Freuden ab, verachtet sie nicht oder meidet sie, nur weil sie Freuden sind, sondern nur, weil diejenigen, die nicht wissen, wie man Freuden rational frönt, großes Leid erleiden. So wie es niemanden gibt, der das Leiden selbst lieben, bevorzugen und begehren würde, nur weil es Leiden ist, und nicht, weil manchmal Umstände eintreten, in denen Leiden und Schmerz erhebliche Freude bereiten. Um ein einfaches Beispiel zu verwenden: Wer von uns würde sich irgendeiner anstrengenden körperlichen Betätigung widmen, wenn diese nicht irgendeinen Nutzen mit sich bringt? Und wer könnte mit Recht jemandem die Schuld geben, der nach Vergnügen strebt, das keine Probleme mit sich bringt, oder jemandem, der Schmerzen meidet, die keine Freude mit sich bringen?

Heute lernen wir, wie man mit CSS und JQuery die Farbe eines Blocks sanft ändert. Mit diesem Plugin können Sie erstaunlich schöne Designergebnisse erzielen. Sie können zum Beispiel ein cooles Menü erstellen, dessen Farbe sich sanft ändert, wenn Sie mit der Maus darüber fahren, und glauben Sie mir, es sieht sehr schön aus.

JQuery

Zunächst müssen Sie zwischen den Tags und Folgendes einfügen:

Dann kopieren wir erneut zwischen den Tags dieses Skript:

$(document).ready(function())( $(".Box").hover(function() ( $(this).stop().animate(( backgroundColor: "#FF4500"), 400); ) , function() ( $(this).stop().animate(( backgroundColor: "#ffffff" ), 400); )); ));

Wobei .Box die Blockklasse ist, die wir oben in CSS erstellt haben.

„#FF4500“ – Hover-Farbe. 400 – Animationsgeschwindigkeit beim Schweben.

„#ffffff“ ist die Anfangsfarbe nach dem Wegbewegen des Cursors. 400 – Animationsgeschwindigkeit beim Wegbewegen des Cursors.

HTML

Nachdem Sie alles wie oben beschrieben ausgeführt haben, ändert sich die Farbe des Blocks allmählich. Um einen solchen Block auf der Seite einzufügen, müssen Sie lediglich Folgendes an der richtigen Stelle hinzufügen:

Und der Block wird angezeigt.

Wichtig

Dieses Plugin kann nur die Hintergrundfarbe ändern. Sie können es beispielsweise nicht an Links oder Text anhängen. Ein weiteres Plugin ändert die Farbe von Links (ich werde auf jeden Fall bald schreiben, wie das geht).

Wenn Sie möchten, dass die Blöcke auf der Seite unterschiedliche Farben haben, wie bei mir, müssen Sie mehrere Skripte hintereinander zwischen den Tags platzieren und dementsprechend nicht vergessen, die Farbe in die gewünschte zu ändern. Das Wichtigste ist, die Klasse zu ändern, zum Beispiel in unserem Beispiel oben – die Box-Klasse, und das nächste Skript sollte eine andere Klasse haben, zum Beispiel Box1, dann Box2 und so weiter.

Das ist alles, liebe Freunde. Wenn Sie etwas nicht verstehen, fragen Sie unbedingt in den Kommentaren nach. Bis bald.

Als ich mit der Notwendigkeit konfrontiert wurde, den Effekt des Textflusses von einer Farbe zur anderen zu schreiben, stellte ich unerwartet selbst fest, dass dies keine so triviale Aufgabe ist.

Sie können nur gegenüber Effects Core ein Häkchen setzen. Dieses Modul erweitert die von uns benötigte Methode jQuery.animate(); Sie müssen lediglich die heruntergeladene Assembly verbinden:

Danach steht die Farbe des Textes, des Rahmens oder des Hintergrunds eines beliebigen Seitenelements für die Animation zur Verfügung.

Schritt 2. Verzögerung zwischen Elementanimationen.

Da nun mit der Animation alles in Ordnung ist, gibt es eine zweite Funktion, die die Aufgabe erschwert – das Hinzufügen einer Verzögerung zwischen der Animation der Sammlungselemente.

Nehmen wir an, wir haben eine Sammlung nummerierter Listenelemente:

Var $elements = $("ol > li");

Die Animation jedes nächsten Elements der Sammlung sollte mit einer gewissen Verzögerung nach dem vorherigen beginnen.

Mit dem folgenden Code können Sie das gewünschte Ergebnis erzielen:

Für (var i = 0; i

Beachten Sie, dass setTimeout() als ersten Parameter eine Funktion akzeptiert, die eine andere Funktion zurückgibt.

Geschieht dies nicht, wird die Variable i als Referenz übergeben und wenn die Zeit für die Ausführung der Timer-Funktion gekommen ist, wird der letzte Wert von i gleich $elements.length sein, da zu diesem Zeitpunkt die for-Schleife beendet ist und die Animation wird überhaupt nicht ausgeführt.

Mithilfe einer verschachtelten Funktion kopieren wir dabei den Wert von i bei jeder Iteration der Schleife, mit deren Hilfe wir dies erreichen korrekte Bedienung geplant.

Schlussfolgerungen

Sie können eine solche Animation beispielsweise verwenden, um zu zeigen, dass Sie in einer Liste von Parametern mindestens einen auswählen müssen, oder um einfach die Aufmerksamkeit auf einen Block der Seite zu lenken.