En este artículo, vamos a crear un texto intermitente usando jQuery. Es básicamente, un texto que es visible, luego se vuelve invisible, y nuevamente vuelve a su visibilidad original y este proceso continúa repetidamente, luego se llama texto intermitente.
Con jQuery, es muy sencillo crear texto parpadeante o parpadeante. Hay algunos métodos incorporados disponibles en jquery que usaremos para crear texto intermitente. Tenemos un método jQuery fadeOut() para convertir un elemento visible en un elemento oculto y otro método fadeIn() para convertir un elemento oculto en visible.
Efecto Fadein: Tenemos que marcar display: none en cada elemento usando CSS, para mostrar el funcionamiento del método fadeIn() .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
<style>
p {
color: red;
font-size: 40px;
display: none;
}
</style>
</head>
<body>
<p id="a">Hello</p>
<p id="b">Hello</p>
<p id="c">Hello</p>
<script>
// Fast fade in
$("#a").fadeIn("fast")
// Slow fade in
$("#b").fadeIn("slow")
// Fade in in 4s
$("#c").fadeIn(4000)
</script>
</body>
</html>
Producción:
Fadeout: el siguiente ejemplo demuestra el método jQuery fadeOut() .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
<style>
p {
color:blue;
font-size: 40px;
}
</style>
</head>
<body>
<p id="a">Hello</p>
<p id="b">Hello</p>
<p id="c">Hello</p>
<script>
// Fade out in 4s
$("#a").fadeOut(1500)
// Slow fade out
$("#b").fadeOut("slow")
// Fast fade out
$("#c").fadeOut("fast")
</script>
</body>
</html>
Producción:
Código final: cuando los dos métodos anteriores se usan juntos, el resultado será un texto parpadeante. Pero el problema con el código anterior es que el texto parpadeará solo una vez. Entonces, para hacer este proceso repetidamente, podemos usar la función jQuery setInterval( ) .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
<style>
p {
color: blue;
font-size: 40px;
}
</style>
</head>
<body>
<p id="a">Hello</p>
<script>
setInterval(function () {
$("#a").fadeOut(200)
$("#a").fadeIn(200)
},100)
</script>
</body>
</html>
Producción:
