Código de JQuery - Mostramos una capa después de estar unos segundos encima de otra capa

Imágen de perfil

Mostramos una capa después de estar unos segundos encima de otra capagráfica de visualizaciones


JQuery

Publicado el 30 de Julio del 2014 por Xavi
1.098 visualizaciones desde el 30 de Julio del 2014. Una media de 14 por semana
Simple código de jquery con javascript que nos permite retrasar unos segundos o milisegundos la aparición de una capa.
Esto puede ser trasladado a cualquier evento que se tenga que ejecutar en una página, como por ejemplo ampliar una imagen al cabo de 1 segundo de estar encima, o ampliar un texto, etc...

Versión 1

Publicado el 30 de Julio del 2014gráfica de visualizaciones de la versión: Versión 1
1.099 visualizaciones desde el 30 de Julio del 2014. Una media de 14 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
 
    <script>
    var delayTime=0;
    $(document).ready(function(){
		$('#texto').mouseover(function() {
			// Iniciamos un timeout de 3 segundos para mostrar el texto
			delayTime = window.setTimeout(function(){
				$('#textoEscondido').fadeIn();
			}, 3000);
		});
		$('#texto').mouseout(function() {
			// Reseteamos el tiempo cuando el mouse sale
			window.clearTimeout(delayTime);
			// escondemos el texto
			$('#textoEscondido').fadeOut();
		});
	});
    </script>
 
	<style>
	#texto {display:inline-block;background:#ccc;padding:10px;}
	#textoEscondido {display:none;padding:10px;}
	</style>
</head>
 
<body>
 
<div id="texto">Pon el mouse encima de este texto durante 3 segundos para visualizar un texto</div>
<div id="textoEscondido">Este texto se visualiza porque has estado 3 segundos con el ratón encima del texto que se encuentra en la parte superior</div>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2728