jquery - How do I get a looping animation to pause when rolled over? -
this have managed far, seems no 1 can me last couple of functions:
<script type='text/javascript''> $(document).ready(function () { swing(); }); function swing() { //making div swing $('#share').animate({right: '210px'}, 1000, function(){swingback()}); } function swingback() { //making div swing $('#share').animate({right: '220px'}, 1000, function(){swing()}); } $('#share').mouseenter(function() { // stop animation if mouse enters div $(this).stop(); }).mouseleave(function() { // continue animation once mouse has left div swingback(); }); </script>
// flag manage animation var resume = false; $(document).ready(function(){ swing(); }); function swing(v){ // if animation stopped mid-swing resume var total = v ? 210-math.abs(v): 210; $('#share').animate({ right: '+=' + total + 'px' }, 1000, function(){ resume = false; swingback(); }); } function swingback(){ $('#share').animate({ right: '0px' }, 1000, function(){ resume = true swing(); }); } $('#share').bind({ mouseenter: function(){ $(this).stop(); }, mouseleave: function(){ // elements current position -- pass swing method resume var v = parseint($(this).css('right'), 0); if(resume) swing(v); else swingback(); } });
i created demo on jsfiddle - here
hope helps
Comments
Post a Comment