Hugo, un gusto saludarte nuevamente. Fijate que traté de implementar el setInterval a mi animacion, pero no es lo que busco. Opte por utilizar lo que se llama "cola de efectos", que a diferencia del setInterval, no me ejecuta la repeticion cada cierto tiempo, si no que la ejecuta al termino de la secuencia de efectos.
La razon por la que necesito, o creo que es la forma correcta para resolver mi problema, es que tengo un slide de imagenes que van una tras otra y al terminar de mostrarlas, se inicia nuevamente la secuencia.
Para esto, en la primera imagen, hago una secuencia de efectos en jquery de la siguiente manera:
Código Javascript
:
Ver original$(".1, .2, .4").fadeOut(0);
$(".1").fadeIn(0);
$(".2").fadeIn(2000,function(){
$(".3").animate({width:715, height:68},2000, function(){
$(".4").fadeIn(1000);});});
Hasta aqui todo bien.
En mi pagina hay 4 estilos diferentes, para mostrarse cada cierto tiempo en el transcurso de una hora. Eso incluye las imagenes del slide. Ambas cosas(estilos e imagenes) las he logrado desarrollar en jquery sin mucho problema.
Un problema se da, que cuando termina el slide de imagenes, de dar la primera vuelta, inicia nuevamente en la primera imagen, que es la que deberia hacer los efectos, y simplemente muestra las imagenes sobrepuestas sin efecto alguno.
De alguna forma, no hay tanto problema, por que me interesa que la animacion se vea siempre al cargar la pagina.
El problema (y gran problema
) que tengo, es que para lograr cargar las imagenes animadas, lo tengo estructurado de esta manera:
Código HTML:
Ver original<img class="1" src="images/mbn.png" alt="image1" id="wows0" name="bn" /> <img class="2" src="images/m1n.png" style="position:absolute; top:-273px; left:0px;" name="color" /> <img class="3" src="images/linkn.png" style="position:absolute; top:-200px; left:0px; width:715px; height:68px;" name="link" /> <img class="4" src="images/ctmn.png" style="position:absolute; top:-190px; left:30px; height:165px; width:243px; z-index:90;" name="moneda"/>
<span><img src="images/tn.png" alt="image3" id="wows1" name="tabla"/></span> <span><img src="images/fn.png" alt="image3" id="wows2" name="flecha" /></span> <span><img src="images/ln.png" alt="image4" id="wows3" name="lupa" /></span> <span><img src="images/wn.png" alt="image5" id="wows4" name="mundo" /></span> <span><img src="images/bn.png" alt="image6" id="wows5" name="baraja" /></span> <span><img src="images/pn.png" alt="image7" id="wows6" name="lapiz" /></span>
Cada <spam> representa una imagen. En el primer<spam> estan las imagenes animadas de un color, en este caso naranja. Pero cuando cargo los estilos e imagenes en color verde por ejemplo, al terminar la primera vuelta el slide, no solamente no me carga la animacion, si no que me carga las imagenes de la animacion en color naranja(como viene en el html). Y solamente este primer <spam> es el que no me respeta desde la primera vuelta. Las demas imagenes si me las sigue generando con los estilos y el color acorde a la hora asignada.
Que puedo hacer para que me respete la los colores de la primera animacion despues de la primera vuelta del slide?
Saludos!!!