Comunidad de diseño web y desarrollo en internet online

Mostrar y esconder elementos en cierto tiempo

Citar            
MensajeEscrito el 16 Ago 2012 08:50 pm
Buena tarde, les comento lo que busco hacer.
Tengo 3 gráficas, las cuales quiero que se vean una por una de manera ordenada (1,2,3) y al llegar al final, o sea a la última gráfica, estas se repitan.
Es decir, Todas las gráficas están escondidas, no se ve ninguna, al cargar la página se muestra la primer gráfica, luego de 5 segundos esta primer gráfica desaparece y en reemplazo de la primera entra la segunda y así hasta completar todo el ciclo.
Estuve buscando pero la verdad no halle algo funcional para lo que quiero hacer, después de un rato esto es lo que tengo:

Código HTML :

   <div class="image right" id="graph_1" style="display: none;">
   <h2> title</h2>
   <h3> text</h3>
   <img src="/images/graph_1.png" />
   </div>

   <div class="image right" id="graph_2" style="display: none;">
   <h2> title</h2>
   <h3> text</h3>
   <img src="/images/graph_2.png" /> 
   </div>

   <div class="image right" id="graph_3" style="display: none;">
   <h2> title</h2>
   <h3> text</h3>
   <img src="/images/graph_3.png" /> 
   </div>




Código Javascript :

   $next = "#graph_1";
   if($next = "#graph_1"){
      $($next).delay(1000).fadeIn('fast');
      $('.fold_inboundoutbound .image').delay(5000).fadeOut('slow');
      $next = "#graph_2";
   }
   if($next = "#graph_2"){
      $($next).delay(1000).fadeIn('fast');
      $('.fold_inboundoutbound .image').delay(5000).fadeOut('slow');
      $next = "#graph_3";
   }
   if($next = "#graph_3"){
      $($next).delay(1000).fadeIn('fast');
      $('.fold_inboundoutbound .image').delay(5000).fadeOut('slow');
      $next = "#graph_1";
   }

Como podrán notar no es la gran cosa, es un código muy rustico.
Como es de notarse al llegar a la gráfica 3 no me retorna a la gráfica uno... y hasta ahí llega todo.

Por Ferroandres

21 de clabLevel



Genero:Masculino  

Front-end + Back-end Developer

chrome
Citar            
MensajeEscrito el 16 Ago 2012 09:18 pm
Okay trata de utiliar la opcion de call back

Código Javascript :

function animacionA(){
    var x = $(this);
    x.show(3000, animacionB);
}

function animacionB(){
    var x = $(this);
    x.show(3000, animacionA);
}



Puedes ver un codigo que estuve haciendo de pruebas en:

http://jsfiddle.net/elporfirio/hQCbu/


Estaba viendo como funcionaba por que lo voy a publicar en mi página ;) www.elporfirio.com

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox
Citar            
MensajeEscrito el 18 Ago 2012 07:00 am

Por caotz

86 de clabLevel

1 tutorial

 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.