JavaScript - error en animacion

   
Vista:
Imágen de perfil de Orlando

error en animacion

Publicado por Orlando orlandorodriguez40@hotmail.com (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

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);
 
});

errorinicio
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