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

Pos: 2

Val: 293

Ha mantenido su posición en JQuery (en relación al último mes)

Mostramos una capa después de estar unos segundos encima de otra capa

JQuery

Publicado el 30 de Julio del 2014 por Xavi (548 códigos)

2.464 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 2014

2.465 visualizaciones desde el 30 de Julio del 2014

<!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>