How do I repeat this JQuery Function/ Animation? -
i have code got github , @ moment calls function once , stops want repeat 3 times , within 3 times want have delay of 10 seconds.
i tried using setinterval didn't work. when try insert setinterval code, second time tries animation doesn't work properly. please me out?
here link jsfiddle
html code:
<div class="resized-splitflap sixthanimation"> london </div> <div class="resized-newyork sixthanimation"> new york </div> <div class="resized-dublin sixthanimation"> dublin </div> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <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' }); }, 1 * 1000); }); })(jquery); </script>
with oncomplete event can:
var ratio = 0.3; $('.resized-splitflap').splitflap({ charwidth: 25 * ratio, charheight: 50 * ratio, imagesize: (1250 * ratio) + 'px ' + (50 * ratio) + 'px', oncomplete: function() { $('.resized-newyork').splitflap({ charwidth: 25 * ratio, charheight: 50 * ratio, imagesize: (1250 * ratio) + 'px ' + (50 * ratio) + 'px', oncomplete:function() { $('.resized-dublin').splitflap({ charwidth: 25 * ratio, charheight: 50 * ratio, imagesize: (1250 * ratio) + 'px ' + (50 * ratio) + 'px' }); } }); } });
it's weird nested function code, works.
edit
as tell , works. see fiddle:
Comments
Post a Comment