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

What is the best way to display text from a header box across multiple line boxes in real time on an HTML page?

Ajax is making a comeback to the world of text after straying towards

Methods for verifying if a file is included in another file, while disregarding any whitespace adjustments

Is it possible for a Jquery radio button to trigger an infinite loop?

Refreshing a single HTML element in ASP.NET MVC - the simple way!

"Error" - The web service call cannot be processed as the parameter value for 'name' is missing

Spacious width that doesn't require a horizontal scrollbar for navigation

achieving initial value to show upon page load

Using JQuery and Ajax, what is the best way to transfer information from a popup form to a PHP page?

placing an image within a frame

Having trouble using the `.not` function in jQuery

steps to send an array through an ajax request using php

What are the specifications for the opacity, width, and height of the background image in Bootstrap's

Are `<text>` nodes unable to utilize ligature fonts in CSS/SVG?

Revamp the button's visual presentation when it is in an active state

Modify the appearance of the post-content's color and background when hovering

Load data into a table in HTML after a successful jQuery event

Enhancing menu appearance on an ASP.NET platform

AJAX retrieving data with a GET request

Incorporating a picture backdrop into a button element in a React Typescript component