Atascado con un control deslizante simple

OK, I came up with this code

<script type="text/javascript">
    $(document).ready(function(){
        var im1 = $("#slider li.first");
        function rev(){ 
            console.log('riv 1 is running now');
            im1.delay(500).animate({marginTop: "-170px"})
               .delay(500).animate({marginTop: "-340px"})
               .delay(500).animate({marginTop: "-510px"})
               .delay(500).animate({marginTop: "0px"}).trigger('stop');
        }

        im1.bind('stop',function(){
            console.log("rev is called on stop")
            rev();
        });

        console.log("rev is called the first time");
        rev();      
    });
</script>

What I want to do with this is when the document is ready, I call a function named rev(). What this function does is start an animation which slides 4 images on the slider. And when the animation is finished, I trigger an event called stop. On the other side, I've defined an event handler which tracks the stop event and runs the function rev() again.

The problem with this is that when the page is load, these functions runs thousands of time before starting the animation and when the limit for callback functions is exceeded (approx after running the function 1709 times), it shows the error on console "Uncaught RangeError: Maximum call stack size exceeded"

¿Hay alguna forma mejor de hacer esto?

preguntado el 10 de marzo de 12 a las 09:03

1 Respuestas

Answer by Jawad Hyder:


I've figured out the problem. All I had to do was to call the rev function in the last animation's callback.

And the code looks like this,

<script type="text/javascript">

        $(document).ready(function(){

        var im1 = $("#slider li.first");

        function rev(){ 
            console.log('riv 1 is running now');
            im1.delay(500).animate({marginTop: "-=170px"})
            .delay(500).animate({marginTop: "-=170px"})
            .delay(500).animate({marginTop: "-=170px"})
            .delay(500).animate({marginTop: "0px"},function stopped (){
                                                   rev();   
                           console.log(" played again! ")
                                   }
             );
        }

        console.log("rev is called for the first time");
        rev();      
        });
        </script>

If anyone else is having the same problem, use the same trick.

contestado el 23 de mayo de 17 a las 13:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.