Challenges with looping in Jquery animations

Question

Challenges with looping in Jquery animations

I've been working on an animation function that I want to run in a loop. So far, I've managed to get it to work for one iteration, but I'm struggling to figure out how to repeat the loop a specific number of times. Below is the code for my animation function. Can someone please help me figure out how to run this any number of times or even make it a never-ending loop?

<script type="text/javascript">
$(document).ready(function(){
    var delay = 150;
    var times = 4;
    var i = 1;

    doMove = function() {
        if( i < times ){
            $('#lip').removeClass('lip'+i);
            $('#lip').addClass('lip'+(i+1));
        } else if ( i == times ) {
            $('#lip').removeClass('lip4');
            $('#lip').addClass('lip1');
        }

        ++i;
        if( i >= times ) {
            clearInterval( interval ) ;
        }
    }

    var interval = setInterval ( "doMove()", delay );


});
</script>

Thank you so much for your help. I'm still new to jquery.

jquery css animation jquery-animate

Answer 1

Answer №1

Your script is experiencing a very short delay, making it difficult to see the changes. Consider adjusting the delay time:

var delay = 150;

Change it to:

var delay = 1000; // 1 second

UPDATE

If you want the script to repeat upon completion, here's an example:

Setting repeats = 0 will result in infinite loops, 1 will run once, 2 will run twice, and so on...

var delay = 150;
var times = 4;
var repeats = 3;
var i = 1;
var j = 0;

doMove = function() {
    if( i < times ){
        $('#lip').removeClass('lip'+i);
        $('#lip').addClass('lip'+(i+1));
    } else if ( i == times ) {
        $('#lip').removeClass('lip4');
        $('#lip').addClass('lip1');
    }

    ++i;
    if( i >= times ) {
        if (j < repeats || repeats == 0) {
            i = 1;
        } else {
            clearInterval( interval ) ;
        }
    }
    ++j;
}

var interval = setInterval ( "doMove()", delay );

Answer 2

Your script is experiencing a very short delay, making it difficult to see the changes. Consider adjusting the delay time:

var delay = 150;

Change it to:

var delay = 1000; // 1 second

UPDATE

If you want the script to repeat upon completion, here's an example:

Setting repeats = 0 will result in infinite loops, 1 will run once, 2 will run twice, and so on...

var delay = 150;
var times = 4;
var repeats = 3;
var i = 1;
var j = 0;

doMove = function() {
    if( i < times ){
        $('#lip').removeClass('lip'+i);
        $('#lip').addClass('lip'+(i+1));
    } else if ( i == times ) {
        $('#lip').removeClass('lip4');
        $('#lip').addClass('lip1');
    }

    ++i;
    if( i >= times ) {
        if (j < repeats || repeats == 0) {
            i = 1;
        } else {
            clearInterval( interval ) ;
        }
    }
    ++j;
}

var interval = setInterval ( "doMove()", delay );

Challenges with looping in Jquery animations

Answer №1

Similar questions

The hovering over a table data element results in a superior transformation

Ways to display title attributes when focused using jQuery?

AngularJS dynamically creates an HTML template that includes an `ng-click` attribute calling a function with an argument

Send a distinct input value from a textbox to PHP

Angular 2's Multi-select dropdown feature allows users to select multiple options

The date on the jQuery Countdown is not accurate

The image fails to reach full width and does not expand correctly when I zoom out

To make the down arrow image scroll to the end of the page after the 2nd click, simply follow these steps. Initially, the first click

Update the div element without needing to reload the entire page

Ensure that the two background images are identical in size and content

What happens when tabs are dynamically added on keypress?

Animating elements on a webpage can be achieved by using both

Using an if/else statement in a Jade Template to conditionally remove a select option

Is there a way to execute a callback function once the page has finished loading through AJAX in

What are the various ways to send data using Ajax to multiple elements?

Utilizing AngularJS to create a vertical calendar

Experiencing a problem with the JavaScript loading function

New update in Fullcalendar v2: Enhancements to dayRender function for agenda view and agenda

What is the reason for index always being not equal to 0?

A tutorial on converting a tree structure into a JSON object using jQuery