Animacion infinita

[Oscar_Hidro]

hola foreros que tal, vengo con un problema al cual no le he podido dar solucion. Tengo una animacion con jquery donde cada uno de los elementos que comforman mi animacion, tiene un efecto propio. La animacion funciona, pero quiero que no nada mas funcione, si no que se repita infinitamente el proceso. El codigo de mi animacion es este:

Código Javascript:

$("#ws_images").ready(function(){
    $(".1, .2, .4, .5").fadeOut(0);
    $(".1").fadeIn(0);
    $(".2").fadeIn(2000,function(){
        $(".3").animate({width:715, height:68},2000, function(){
            $(".4").fadeIn(1000);
        });
    });
});
 

Espero me puedan ayudar.

[IsaBelM]

eso suena a usar un temporizador (setInterval)

[Oscar_Hidro]

Gracias Isabel por tu orientación. Nuevamente estoy aqui para pedir tu asesoria, puesto que implemento mi código de la siguiente manera, y no logro obtener el resultado.

Código Javascript:

function anim(){
$("#ws_images").ready(function (){
    $(".1, .2, .4, .5").fadeOut(0);
    $(".1").fadeIn(0);
    $(".2").fadeIn(2000,function(){
        $(".3").animate({width:715, height:68},2000, function(){
            $(".4").fadeIn(1000);
        });
    });
});
};
setInterval(anim());
 

Ojala me puedan ayudar al respecto para encontrar el error. Saludos a todos

[Hugo_Euan]

Hola de nuevo oscar...

Pues.. de primera instancia... no entiendo por que utilizar el ready para un objeto en especifico.. en vez de asignarlo globalmente al documento....

otra cosa.. es que estas usando el setInterval.. pero no le estas asignando tiempo...
este procedimiento requiere 2 parametros....

setInterval('function()', tiempo)

en todo caso sería así

setInterval('anim();', 1000); //esto es igual a 1 segundo

Espero ayudarte.. Saludos y Éxito...

[Oscar_Hidro]

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:

$(".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:

<span>
<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>
 
<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!!!

[domibonza]

Estimado, creo que esto te puede servir, ahi tienen un ejemplo de un loop infinito

http://www.w3schools.com/js/js_timing.asp

[Oscar_Hidro]

Gracias por tu aportacion @IsabelIM, @domibonza, e @hugo. Desafortunadamente ni siquiera generando el script para que lo repita, me corrigiò ese detalle.

Peeeeeeeero, improvise con php. Se que este es foro de javascript, pero pongo el mètodo de la solución que implemente por si acaso a alguien le sirviera esta solucion o lo tomara como un tip.

A final de cuentas lo que yo necesitaba era un slide de imagenes de determinado color, y que este se mostrara con el estilo css de mi pagina con los colores mismos del slide. Es decir, tengo mi pagina de un color con algunas partes en verde, y que cuando se mostrara en este coor, apareciera el slide con imagenes en verde. Si la pagina era naranja, que mostrara las imagenes en naranja.

El cambio de estilos lo logrepor medio de un script jquery

Código Javascript:

day = new Date();
minutes = day.getMinutes();
seconds = day.getSeconds()
time = minutes+"."+seconds;
if(time>=0 && time<3.44 || time>=15.0 && time<18.44 || time>=30.0 && time<33.44 || time>=45.0 && time<48.44){
document.write("<link rel='stylesheet' type='text/css' href='css/orange.css' id='estilo1'/>");
}
else if(time>=3.45 && time<7.29 || time>=18.45 && time<22.29 || time>=33.45 && time<37.29|| time>=48.45 && time<52.29){
document.write("<link rel='stylesheet' type='text/css' href='css/green.css' id='estilo1'/>");
}
else if(time>=7.30 && time<11.14 || time>=22.30 && time<26.14 || time>=37.30 && time<41.14 || time>=52.30 && time<56.14){
document.write("<link rel='stylesheet' type='text/css' href='css/_red.css' id='estilo1'/>");
}
else if(time>=11.15 && time<14.59 || time>=26.15 && time<29.59 || time>=41.15 && time<44.59 || time>=56.15 && time<59.59){
document.write("<link rel='stylesheet' type='text/css' href='css/blue.css' id='estilo1'/>");
}
 

Como se ve, puse intervalos de tiempo en minutos y segundos para que al momento de accesar, se mostrara cualquiera de estos estilos.

Y con php genere 4 slides(uno de cada color), y simplemente mande a llamarlos de la misma manera que los estilos, solo que ahora con php:

Código PHP:

<?php 
$minutes = date(i);
$seconds = date(s);
$time = $minutes.'.'.$seconds;
/*$time = date("i:s");*/
if($time>=0.00 && $time<3.44 || $time>=15.0 && $time<18.44 || $time>=30.0 && $time<33.44 || $time>=45.0 && $time<48.44){
include('sliden.php');
}
else if($time>=3.45 && $time<7.29 || $time>=18.45 && $time<22.29 || $time>=33.45 && $time<37.29|| $time>=48.45 && $time<52.29){
include('slidev.php');
}
else if($time>=7.30 && $time<11.14 || $time>=22.30 && $time<26.14 || $time>=37.30 && $time<41.14 || $time>=52.30 && $time<56.14){
include('slider.php');
}
else if($time>=11.15 && $time<14.59 || $time>=26.15 && $time<29.59 || $time>=41.15 && $time<44.59 || $time>=56.15 && $time<59.59){
include('slideb.php');
}
?>
 
Puse el mismo intervalo de tiempo para el slide de cada color, y asi muestra los dos elementos(pagina y slide) al mismo tiempo. Mi intencion era hacerlo todo con jquery, pero tuvo sus detalles que no pude corregir, asi que busque esta solucion alternativa dandome el resultado que yo queria 
 
Saludos a todos y gracias por su atencion. :cool: