JQuery - hacer que un div aparezca y después de un rato desaparezca

 
Vista:
sin imagen de perfil

hacer que un div aparezca y después de un rato desaparezca

Publicado por kuroneko (1 intervención) el 26/06/2015 17:05:53
Estaba tratando de hacer un jquery para mi web http://kuronekofan.netau.net/vocab.php
que al clicar en un kanji se muestre su pronunciación y significado tal y como se ve en la web, pero quería añadirle que al despues de 5 segundos por ejemplo desapareciera su pronunciación y significado.. en vez de hacer un clicktoogle... según he visto por internet hay la función setTimeOut para eso pero nose porque no me funciona correctamente:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('.kanji').click(function(){
 
	  $(this).next('.romanji').show( function()
	  {
	   setTimeout(function(){
			 $(this).hide();
 
		}, 5000);
 
	  });
	  $(this).next('.romanji').next('.significado').show( function()
	  {
	   setTimeout(function(){
			 $(this).hide();
 
		}, 5000);
 
	  });
 
 });

soy bastante nuevo en jquery así que no entiendo muy bien en que estoy fallando, agradecería si alguien puede ayudarme ^^
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 2
Ha aumentado su posición en 25 puestos en JQuery (en relación al último mes)
Gráfica de JQuery

hacer que un div aparezca y después de un rato desaparezca

Publicado por Cbastian (11 intervenciones) el 26/06/2015 21:15:06
Has probado que tu funcion si este corriendo?

Me explico,,, en:

1
2
3
setTimeout(function(){
	 $(this).hide();
}, 5000);

prueba colocando un alert, si a los 5 seg te da el alert entonces si esta entrando; una forma con la que puedes probar para ocultar lo que deseas puede ser utilizando las variables de jquery.
Por ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
$('.kanji').click(function(){
         var $romanji=  $(this).next('.romanji');
	 $romanji.show( function()
	  {
	   setTimeout(function(){
			 $romanji.hide();
 
		}, 5000);
 
	  });
 
 });

pruebalo y comentas como te fue, aunque no soy el mas experto en Jquery puedo ayudarte a ver alternativas...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas
Val: 27
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

hacer que un div aparezca y después de un rato desaparezca

Publicado por Vainas (96 intervenciones) el 27/06/2015 11:42:27
Buenas:

Cbastian tiene razon, deberias probar a poner un alert o un console.log() a ver si entra en esa seccion.

Siempre lo repido, hay que leerse la documentacion por si se te ocurre algo mas http://api.jquery.com/show/

Fijate que se pueden pasar dos parametros, el tiempo que va a tardar, y la funcion que se va a ejecutar cuando finalice el mostrar u ocultar, asi que se me ocurre que el hide se le puede decir que se retrase la ejecucion directamente, algo asi:

1
2
3
4
5
6
7
8
9
10
11
12
$('.kanji').click(function(){
	  $(this).next('.romanji').show(function()
	  {
			 $(this).hide(5000);
	  });
	  $(this).next('.romanji').next('.significado').show( function()
	  {
 
			 $(this).hide(5000);
	  });
 
 });

Podrias mirar la consola de chrome a ver si tienes algun error, yo probaria poner un console.log($(this)); a ver si ese parametro es el que necesitas.

Espero que te sirva, Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

hacer que un div aparezca y después de un rato desaparezca

Publicado por andyman (5 intervenciones) el 27/06/2015 20:56:46
hola yo lo haria con la funcion delay de jquery seria algo así
//con esto hago que aparezca
$("#midiv").fadeIn();
//y con esto desaparecerá en 5 segundos
$("#midiv").delay(5000).fadeOut();

//posdata mientras pasan esos 5 segundos no se puede ejecutar ninguna otra función de jquery.

es como yo lo he hecho ultima mente, cualquier otra inquietud comentas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas
Val: 27
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

hacer que un div aparezca y después de un rato desaparezca

Publicado por Vainas (96 intervenciones) el 28/06/2015 10:22:39
Buenas:

Tienes razon andyman, me he caido con mi propia explicacion (lo que tiene lo leerse la documentacion)... el primer valor no retrasa sino que es el tiempo en ejecutarse el efecto.

Aun asi no me gusta lo de "no se puede ejecutar ninguna otra función de jquery." o como explica la documentacion de delay "retrasa la ejecucion de las funciones que se encuentran en la cola".

No encuentro ninguna otra forma de hacerlo sino como ha comentado andyman. Añado que para que tenga efecto dicen que show y hide tiene que llevar algun argumento (aunque sea un 0):

1
$(this).next('.romanji').show(0).delay(5000).hide(0);

Creo, personalmente que es mejor este codigo http://jsfiddle.net/tbleckert/RcL5y/ que lo que hace es meter el delay despues de que se ejecute la animacion.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas
Val: 27
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

hacer que un div aparezca y después de un rato desaparezca

Publicado por Vainas (96 intervenciones) el 28/06/2015 11:08:28
Buenas de nuevo:

He llegado a otra conclusion sobre el tema principal y setTimeout. El tema es que setTimeout se ejecuta en este caso sobre el objeto window (lo puedes comprobar imprimiendo this o $(this) dentro de setTimeout). Puedes usar closures para pasarle this a la function setTimeout y asi cuando se ejecute tenga el this que necesita y no otro. El tema es guardar antes de ejecutar setTimeout el valor de this en una variable y luego utilizar esta cuando la necesites.

Esto sucede por que una function se ejecuta dentro de un contexto (por si quieres investigar un poco mas).

Te dejo el ejemplo aqui: http://jsfiddle.net/r9qhv752/

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar