jQuery: Hintergrundfarbe eines Elements ändern
-
jQuery Hintergrundfarbe ändern Mit der
queue()API -
jQuery Hintergrundfarbe ändern mit der
hide()API
In diesem Artikel erfahren Sie, wie Sie mit jQuery die Hintergrundfarbe eines Elements bei Mouseover ändern. Wir erreichen dies mit zwei jQuery-APIs, nämlich queue() und hide().
jQuery Hintergrundfarbe ändern Mit der queue() API
Dieses erste Beispiel ändert die Hintergrundfarbe vor und nach der Animation. Hier benötigen Sie die queue()-API, da die css()-API allein nicht wie vorgesehen funktioniert.
Das liegt daran, dass es eine sofortige Wirkung auf das angehängte Element hat. Indem Sie die queue()-API verwenden, können Sie ihr eine Funktion übergeben, die einen Effekt nach dem Ergebnis der css()-API auslöst.
Das bedeutet, dass beim Start der Animation die Anfangsfarbe im css() wirkt. Danach können Sie die Anfangsfarbe mit der queue()-API in eine andere Farbe ändern.
Das Folgende ist der Pseudocode des Prozesses.
- Maus über die Schaltfläche aktiviert die Anfangsfarbe in der API
css(). - Das Element verschwindet.
- Das Element wird wieder angezeigt.
- Schließlich ändert sich seine Farbe in eine andere Farbe, die in der
queue()-API definiert ist.
Der folgende Code ist die Implementierung des Pseudocodes. Was folgt, ist das Ergebnis in einem Webbrowser.
Im Ergebnis sehen Sie, dass die Animation nicht auftritt, wenn Sie die Maus das zweite Mal über die Schaltfläche bewegen. Darauf gehen wir im nächsten Beispiel ein.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-change-background-color-with-queue-API</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body { display: grid; justify-content: center; align-items: center; height: 100vh; }
main { border: 3px solid #1a1a1a; padding: 1.2em; display: grid; }
button { align-self: center; padding: 1.2em; cursor: pointer; }
p { font-size: 5em; }
</style>
</head>
<body>
<main>
<p id="random_big_text">A big random text.</p>
<button>Move your mouse here.</button>
</main>
<script>
$(document).ready(function() {
$("button").mouseover(function() {
let random_big_text = $("#random_big_text");
random_big_text.css("background-color", "#ffff00");
random_big_text.hide(1500).show(1500);
random_big_text.queue(function() {
random_big_text.css("background-color", "#ff0000");
});
});
});
</script>
</body>
</html>
Ausgang:
jQuery Hintergrundfarbe ändern mit der hide() API
Die Verwendung der jQuery hide()-API zum Ändern der Hintergrundfarbe baut auf unserem ersten Beispiel auf, in dem wir die queue()-API verwendet haben. Das Ergebnis ist dasselbe mit zwei Unterschieden; Wir verwenden API-Verkettung und der Effekt funktioniert jedes Mal.
Als Ergebnis können Sie am Ende jeder Animation mit der Maus über die Schaltfläche fahren, und der Vorgang beginnt von vorne. Der folgende Code zeigt Ihnen, wie es gemacht wird; Was folgt, ist das Ergebnis in einem Webbrowser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-change-background-color-with-hide-API</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body { display: grid; justify-content: center; align-items: center; height: 100vh; }
main { border: 3px solid #1a1a1a; padding: 1.2em; display: grid; }
button { align-self: center; padding: 1.2em; cursor: pointer; }
p { font-size: 5em; }
</style>
</head>
<body>
<main>
<p id="random_big_text">A big random text.</p>
<button>Move your mouse here.</button>
</main>
<script>
$(function(){
$("button").mouseover(function(){
let random_big_text = $("#random_big_text");
random_big_text.stop()
.css("background-color","#ffff00")
.hide(1500, function() {
random_big_text.css("background-color","#ff0000")
.show(1500);
});
});
});
</script>
</body>
</html>
Ausgang:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn