CODEWITHSUNDEEP
javascriptjquerycssanimation
Rei
Rei

Reputation: 512

infinite looping in JQuery?

Below is the code

function mafunk(z){
    if(z == 1){
        $(".cloud").each(function(index, element) {
        if(!$(this).attr('id')){
        $(this).css("left",  -20+'%');
        $(this).next('a').css("left", -20+'%');
        }
     });
    }
    var x = (Math.random() * 10000) + 20000;
    $('.cloud').animate({
    left: '150%'
    }, x, 'linear', mafunk(1));

}


mafunk(0);

I don't know where I got my code wrong, basically, the things I tried to animate have initialization position which I can't change. therefore, I called mafunk(0) so that it doesn't change the initial position. After the animation ends (when the things I animate reach 150%), it will call mafunk(1) so the function will re-position the things, so they're ready to be animated again.

The above code makes my animation stop however, I checked via inspect element and they're all stuck on left position -20%, without animated even once. if I remove the callback "mafunk(1)", it will animate, but only once :/ Where did I go wrong?

Upvotes: 0

Views: 62

Answers (1)

Denys Séguret
Denys Séguret

Reputation: 382150

animate expects a function as last argument, so it can call it.

Right now, you pass mafunk(1). This isn't a function, this is the result of a function call, and it's undefined. What you should pass is function(){ mafunk(1) }.

Change this line

}, x, 'linear', mafunk(1));

to 

}, x, 'linear', function(){ mafunk(1) });

Upvotes: 5

Related Questions