error en animacion
Publicado por Orlando (12 intervenciones) el 07/04/2017 21:41:27
Muy buenas tardes y gracias de antemano.
Quiero mostrar 5 imagenes distintas con animacion en js, pero resulta que me muestra todas las imagenes, en evz de mostrarla una por una.
Anexo imagen de resultado tambien el codigo html y el js
inicio.html
animacion.js
Quiero mostrar 5 imagenes distintas con animacion en js, pero resulta que me muestra todas las imagenes, en evz de mostrarla una por una.
Anexo imagen de resultado tambien el codigo html y el js
inicio.html
1
2
3
4
5
<img src="img/multi.jpg" alt="" class="info__img" id="multi">
<img src="img/detectiv.jpg" alt="" class="info__img" id="detectiv">
<img src="img/informes2.jpg" alt="" class="info__img" id="informes2">
<img src="img/juridico.jpg" alt="" class="info__img" id="juridico">
<img src="img/security.jpg" alt="" class="info__img" id="security">
animacion.js
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
58
59
$(document).ready(function(){
var tiempo_inicio_anim = 200; var tiempo_entre_img = 3000; var tiempo_fade = 1000;function animacion_simple() {
// Mostramos la foto 1
$("#multi").fadeIn(tiempo_fade);
// Cuando pasen otros 3000 milisegundos, ocultamos la foto 1 y mostramos la foto 2
setTimeout(function() {
// Ocultamos la foto 1
$("#multi").fadeOut(tiempo_fade);
// Mostramos la foto 2
$("#detectiv").fadeIn(tiempo_fade);
}, tiempo_entre_img);
// Cuando pasen otros 3000 milisegundos, ocultamos la foto 2 y mostramos la foto 3
setTimeout(function() {
// Ocultamos la foto 2
$("#detectiv").fadeOut(tiempo_fade);
// Mostramos la foto 3
$("#informes2").fadeIn(tiempo_fade);
}, tiempo_entre_img*2);
// Cuando pasen otros 3000 milisegundos, ocultamos la foto 3 y mostramos la foto 4
setTimeout(function() {
// Ocultamos la foto 3
$("#informes2").fadeOut(tiempo_fade);
// Mostramos la foto 4
$("#juridico").fadeIn(tiempo_fade);
}, tiempo_entre_img*3);
// Cuando pasen otros 3000 milisegundos, ocultamos la foto 4 y mostramos la foto 5
setTimeout(function() {
// Ocultamos la foto 4
$("#juridico").fadeOut(tiempo_fade);
// Mostramos la foto 5
$("#security").fadeIn(tiempo_fade);
}, tiempo_entre_img*4);
// Cuando pasen otros 3000 milisegundos, ocultamos la foto 5 y volvemos a iniciar la animación
setTimeout(function() {
// Ocultamos la foto 5
$("#security").fadeOut(tiempo_fade);
// Iniciamos otra vez la animación
animacion_simple();
}, tiempo_entre_img*5);
} //Empezamos la animación a los 200 milisegundos
setTimeout(function() {
animacion_simple();
}, tiempo_inicio_anim);
});
Valora esta pregunta
0