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

Imágen de perfil
Val: 293
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

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 (548 códigos)
2.369 visualizaciones desde el 30 de Julio del 2014
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
2.370 visualizaciones desde el 30 de Julio del 2014
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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2728