CODEWITHSUNDEEP
jquery
Virat Kohli
Virat Kohli

Reputation: 221

How to repeat a jquery animation?

So basically I have this JQuery code (see below). at the moment the animation gets played once after 9 seconds but I want it to play it 3 times and within those 3 times there should be a delay. Could someone help me out please as I am new to JQuery? Thanks!

<script>
    (function ($) {
$(document).ready(function () {
    window.setTimeout(function(){
        var ratio = 0.5;
        $('.resized-splitflap').splitFlap({
            charWidth:  25 * ratio,
            charHeight: 50 * ratio,
            imageSize:  (1250 * ratio) + 'px ' + (50 * ratio) + 'px'
        });

            $('.resized-newyork').splitFlap({
            charWidth:  25 * ratio,
            charHeight: 50 * ratio,
            imageSize:  (1250 * ratio) + 'px ' + (50 * ratio) + 'px'
        });
                    $('.resized-dublin').splitFlap({
            charWidth:  25 * ratio,
            charHeight: 50 * ratio,
            imageSize:  (1250 * ratio) + 'px ' + (50 * ratio) + 'px'
        });
        }, 9 * 1000);
  });
    })(jQuery);
</script>

Upvotes: 0

Views: 88

Answers (3)

Jai
Jai

Reputation: 74738

This answer is somehow extended version of @dreamweiver: 

  var ratio = 0.5;
  var arr = $('.sameclass').map(function(){ return this.id; }).get();
  var loop = 0;
  var id = setInterval(function() {
    $('#'+arr[loop]).splitFlap({ // select the id in the arr here.
        charWidth:  25 * ratio,
        charHeight: 50 * ratio,
        imageSize:  (1250 * ratio) + 'px ' + (50 * ratio) + 'px'
    });
    loop++; // increment the loop value here
    if(loop === 3){
      clearInterval(id);
    }
    }, 9 * 1000);

What i want to suggest you that just put a same class to all the divs you want to splitFlap and current class name change to ids for them like this:

<div class='sameclass' id='resized-splitflap'></div>
<div class='sameclass' id='resized-newyork'></div>
<div class='sameclass' id='resized-dublin'></div>

then you can make them to put in array as i suggested in var arr. Then you can make use of setInterval as above.

Upvotes: 0

dreamweiver
dreamweiver

Reputation: 6002

call setInterval() instead of setTimeout for recurring callback function execution after definite time interval/delay.

Simple example of repeated calling of same function using setInterval()

JS Code:

  var loop = 0;
var id = setInterval(function() {
  loop++;
  if(loop === 3)
  {
    clearInterval(id);
  }
  alert(" loop: "+loop);
}, 1000);

Live Demo @ JSFiddle:http://jsfiddle.net/dreamweiver/Svx3n/112/

Note: Keep in mind to clear the setInterval() when not required, as it may cause abnormal behaviour & may slowdown the javascript engine.

Upvotes: 2

bloC
bloC

Reputation: 526

You can solve it like this: First wrap all your animations in a function. Then on document ready just call:

yourFunctionWithAllAnimations()
            for (var i = 0; i < 2; i++) {
            setTimeout(function() { yourFunctionWithAllAnimations() },3000)
        }

first call is without delay, the next two calls are with a delay of 3000ms = 3 sec

Upvotes: 0

Related Questions