Como simular la etiqueta blink con jQuery

Como simular la etiqueta blink con jQuery

En clase de javascript siempre he defendido que la pugna entre Microsoft y Netscape originara la invención de etiquetas que no pertenecían a ningún standard.

Ejemplos de estas etiquetas son la etiqueta <marquee>(navegador Explorer) la etiqueta <blink>(navegador Netscape).

En el año 1994 si funcionabas con Netscape no podías ver correctamente el efecto marquee y si navegabas con Explorer entonces no podías hacerlo con blink.

Esta es la tesis oficial que he defendido hasta el momento.

Sin embargo la historia que defiende :lou, mote de el propio creador de <blink> es esta. ¿Te la vas a perder?

Bien, el caso es que llegados 2019 no hay ningún navegador ni standard que incluya esta etiqueta.

De todos modos, si la probáis en el navegador todavía funciona.

Para el ejercicio que se plantea existen muchas soluciones. Algunos conceptos que deberías dominar son:

  • Uso de callback
  • Instrucción toggleClass()
  • Otras instrucciones como show(), hide(), …
  • setInterval()

Bien. Sin más dilación pasemos al ejercicio.

soporte etiqueta blink 2019
soporte etiqueta blink según navegadores a fecha de esta publicación. Fuente: https://developer.mozilla.org

Enunciado

Simula mediante jQuery el efecto blink.

Puedes ver un ejemplo copiando el siguiente html.

<p id="efectoBlink">texto parpadeante</p>
<blink>test</blink>

Solución del ejercicio

Existen muchas posibles soluciones. Describo la que a mi me parece más fácil.

Se crea una clase .parpadeo{display:none;}cuyo objetivo es ocultar el texto cuando esté asociada a <p id="efectoBlink">texto parpadeante</p>

La forma con que la asociaremos es mediante la instrucción.toggleClass() que llamaremos mediantesetInterval()cada 200 milisegundos que es el tiempo que parece más aproximado al efecto original.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Efecto blink</title>
	
	<style>
		.parpadeo{display:none;}

	</style>

</head>
<body>

<p id="efectoBlink">texto parpadeante</p>
<blink>test</blink>
	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
	
	$(document).ready(function(){
		setInterval(function(){
			$("#efectoBlink").toggleClass("parpadeo");
		},200)
	})

</script>

</body>
</html>

¡Hola!

Querido lector,

¿Te atreves ahora con el efecto marquee?

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.