Loop/Repeat jQuery animation

Question

I have a button on click of which a fish appears and it should randomly over a container at random places. but in my code its just animating only once and not repeating overand overagain. I want my function to be generic so that it can be run over and over of many fishes and be efficient code.

The HTML:

  <input type="button" value="Post" class="post-button" />

The jQuery:

var idgenerated=0;
$('.post-button').on('click',function(e){
    //$('#container img:last-child').append('<div class="small-fish"> </div>');
    $('#rightarrow').after('<div class="fishhatch" id="'+idgenerated+'"></div>');
    $('.pop-up-selectCategory').hide(); 
    $('.oyster').removeClass('oyster-click');
    animatenewfish(idgenerated);
    idgenerated++;  
}); 

function animatenewfish(idgenerated) {
    console.log("hi");
    var Fishv1 = $("#"+idgenerated),
    theContainer = $("#container"),
    maxLeft = theContainer.width() - Fishv1.width()-100,
    maxTop = theContainer.height() - Fishv1.height()-100,
    leftPos = Math.floor(Math.random() * maxLeft),
    topPos = Math.floor(Math.random() * maxTop),
    imgRight = "Assets/R1gif.gif",
    imgLeft = "Assets/FIsh1.gif";
    console.log(maxLeft+"max");
    console.log(leftPos+"travel");
    if (Fishv1.position().left < leftPos) {
        Fishv1.css("background-image",'url("' + imgRight + '")');
    } else {
        Fishv1.css("background-image",'url("' + imgLeft + '")');    
    }

    Fishv1.animate({
        "left": leftPos,
        "top": topPos
    }, 18000, animatenewfish);
}

http://www.jquerybyexample.net/2012/02/how-to-use-jquery-settimeout-function.html — Aaroniker, May 09 '14 at 09:42
http://stackoverflow.com/questions/11401535/how-to-loop-animate-jquery — keypaul, May 09 '14 at 09:44

Swanand · Answer 1 · 2014-05-09T09:57:25.310

0

put your animation in

setInterval(function(){
    Fishv1.animate({
        "left": leftPos,
        "top": topPos
    }, 18000, animatenewfish(idgenerated));
},18000);

so it will be called after each 18000 milliseconds.

edited May 09 '14 at 09:57

answered May 09 '14 at 09:44

Swanand

1,138
8
21

As i can see OP is calling `animatenewfish(idgenerated);` function on click. – shyammakwana.me May 09 '14 at 09:50

score 0 · Answer 2 · answered May 09 '14 at 09:48

change code Where you are calling your function This code will call function every 500 ms.

  /*Jquery Code*/
  var idgenerated=0;
  $('.post-button').on('click',function(e){

    //$('#container img:last-child').append('<div class="small-fish"> </div>');
    $('#rightarrow').after('<div class="fishhatch" id="'+idgenerated+'"></div>');
    $('.pop-up-selectCategory').hide(); 
    $('.oyster').removeClass('oyster-click');
    setInterval(function() { animatenewfish(idgenerated); }, 500);        
    idgenerated++;

});

score 0 · Answer 3 · edited May 23 '17 at 11:57

0

The animate takes an optional callback

Fishv1.animate({
    "left": leftPos,
    "top": topPos
}, 18000, animatenewfish(idgenerated));

How can I loop an animation continuously in jQuery?

edited May 23 '17 at 11:57

Community

1
1

answered May 09 '14 at 09:51

Kivylius

6,357
11
44
71

Loop/Repeat jQuery animation

3 Answers3