Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » Aparicion y desaparición de elementos li

JQuery - Aparicion y desaparición de elementos li

Volver
Nuevo Tema
<<>>
 
Vista:

Aparicion y desaparición de elementos li

Publicado por Francisco Jesús (3 intervenciones) el 08/07/2013 02:01:45
Hola. Estoy intentando conseguir que todos los elementos de una lista de una página web vayan apareciendo uno a uno , con fadeIn, se mantengan un rato, con delay y desaparezcan con fadeOut, pero que sólo se muestre uno cada vez. Lo máximo que consigo es que aparezcan todos de golpe, se mantengan un tiempo todos y desaparezcan todos a la vez. El código que uso es el siguiente:

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
	var lista = $('li').hide();
 
		for (i=0;i<lista.length;i++){
			lista.eq(i).fadeIn(2000);
			lista.eq(i).delay(3000);
			lista.eq(i).fadeOut(2000);
			};
 });


¿Alguien sabe cómo podría conseguirlo?

Gracias.
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

Aparicion y desaparición de elementos li

Publicado por Francisco Jesús (3 intervenciones) el 09/07/2013 08:35:25
Ya he resuelto el problema.

Es que soy novato en JQuery y he comprendido que delay introduce el retardo especificado a partir del momento en que se cargó la página ( o al menos eso creo que es lo que pasa).
El tema lo he resuelto modificando el código, quedando así:

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
 
		var lista = $('li').hide();
 
		for (i=0;i<lista.length;i++){
			lista.eq(i).delay(7000*i).fadeIn(1000).delay(5000).fadeOut(1000);
		};
 
});


He introducido retardos en cada elemento dependiendo de su posición en el array. Así el segundo elemento tiene un retardo que corresponde a la duración del primer elemento, el tercero tiene un retardo correspondiente a la duración de los dos anteriores, etc. Además, he encadenado las funciones.

Ahora me gustaría saber cómo hacer que se recargue la página cuando haya acabado ese bloque de código.

Llevo algún tiempo intentándolo, pero no consigo nada.

¿Alguien sabe cómo hacerlo?

Gracias.
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 xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Aparicion y desaparición de elementos li

Publicado por xve (673 intervenciones) el 09/07/2013 09:18:03
Francisco me puedes mostrar el código html para poder probarlo?
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

Aparicion y desaparición de elementos li

Publicado por Francisco Jesús (3 intervenciones) el 09/07/2013 20:03:44
Mi código html es:

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
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> Pruebas JQuery </title>
	<link rel="stylesheet" type="text/css" href="estiloprueba.css"/>
	<script src="jquery-2.0.3.min.js" type="text/javascript"></script>
	<script src="pruebas-jq.js" type="text/javascript"></script>
	</head>
<body>
	<div id="encabezado">
			<h1>Encabezado de la presentación</h1>
	</div>
 
	<div id="contenedor">
		<ul>
	  		<li><h2>Título del primer elemento</h2>
	     		<h3>Este sería el contenido del primer elemento.</h3></li>
     		<li><h2>Título del segundo elemento.</h2></li>
			<li><h2>Título del tercer elemento.</h2></li>
			<li><h2>Título del cuarto elemento.</h2></li>
			<li><h2><span class="importante">Elemento que es más importante.</span> </h2></li>
			<li><h2>Otro elemento.<br>
				<h3>Después de este elemento debería volver a empezar el ciclo, recargándose la página.</h3></h2></li>
  		</ul>
    </div>
	<div id="pie">
		<p>página 1/3</p>
	</div>
</body>
</html>


El código JQuery está en un archivo aparte llamado pruebas-jq.js
Los estilos se encuentran en un archivo llamado: estiloprueba.css
Y su contenido es:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
@charset "utf-8";
/* Documento CSS */
body {
	margin: 0;
	padding: 0;
	border: 0;
    background-color: green;
 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   color: black;
   font-family: Arial, sans-serif;
   text-align: center;
	font-size: 1.5em;
 
}
.importante {
	text-decoration: blink;
	color: yellow;
}
 
#contenedor {

	position: fixed;
	top: 3em;
	margin: 0em;
	padding: 0;
	border: 0;
	width: 100%;
	height: 93%;
	text-align: left;
	)
}
#encabezado {

	position: fixed;
	top: -1.2em;
	left: 0;
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 5%;
	text-align: center;
	color: blue;
}
#pie {

   position: fixed;
   top: 93%;
	width: 100%;
	height: 2%;
	color: blue;
}
li {
	list-style: none;
	display: none;
}


La pregunta es: ¿Qué código habría que usar para conseguir que, cuando acabe el script se recargue la página repitiéndose toda la presentación? Me gustaría también comprender cómo trabaja exactamente el código que se me proponga. A ver si aprendo de una vez cómo funcina JQuery.
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