jQuery: cambiar el color de fondo de un elemento
-
jQuery Cambiar el color de fondo usando la API
queue() -
jQuery Cambiar el color de fondo usando la API
hide()
Este artículo le enseña cómo usar jQuery para cambiar el color de fondo de un elemento al pasar el mouse. Lo lograremos usando dos API de jQuery que son queue() y hide().
jQuery Cambiar el color de fondo usando la API queue()
Este primer ejemplo cambiará el color de fondo antes y después de la animación. Aquí, necesitará la API queue() porque la API css() por sí sola no funcionará según lo previsto.
Eso es porque tiene un efecto instantáneo en el elemento adjunto. Al usar la API queue(), puede pasarle una función que activa un efecto después del resultado de la API css().
Esto significa que el color inicial en el css() tendrá un efecto al comienzo de la animación. Posteriormente, puedes cambiar el color inicial a otro color con la API queue().
El siguiente es el pseudocódigo del proceso.
- Pasar el mouse sobre el botón activa el color inicial en la API
css(). - El elemento se desvanece.
- El elemento se muestra de nuevo.
- Finalmente, su color cambia a otro color definido en la API
queue().
El siguiente código es la implementación del pseudocódigo. Lo que sigue es el resultado en un navegador web.
Como resultado, observará que la animación no se produce la segunda vez que pasa el mouse sobre el botón. Abordaremos eso en el siguiente ejemplo.
<!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>
Producción:
jQuery Cambiar el color de fondo usando la API hide()
El uso de la API hide() de jQuery para cambiar el color de fondo se basa en nuestro primer ejemplo en el que usamos la API queue(). El resultado es el mismo con dos diferencias; usamos el encadenamiento de API, y el efecto funciona siempre.
Como resultado, puede pasar el mouse sobre el botón al final de cada animación y el proceso comenzará de nuevo. El siguiente código le muestra cómo se hace; lo que sigue es el resultado en un navegador web.
<!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>
Producción:
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