Question

I’m trying to pause the jQuery animate property in the middle of it’s execution.

My code below randomly pauses and then plays the animation in the middle of the animation.

I’m looking to accomplish this in an easier sequence like animating the marginLeft and pausing randomly ever half a second or full second and then executing the picking up where the animation left off at var $play.

I’m trying to slow down the overall animation adding stop point at random times and then trying to pick up the original animation sequence.

Any help would be greatly appreciated.

<script>
$(document).ready(function() {

 var $block = $('.1');

var numRand1 = Math.floor(Math.random()*4000)
var numRand2 = Math.floor(Math.random()*3000)
var numRand3 = Math.floor(Math.random()*9000)


var $play = $block.animate({"marginLeft": "420px"}, numRand1);


setInterval(function() {
   $block.stop();
   $block.delay(1500);
   $block.animate({"marginLeft": "420px"}, numRand2);
}, 2000);

setInterval(function() {
   $block.stop();
$block.delay(2500);
$block.animate({"marginLeft": "420px"}, numRand3);
}, 4000);



});
</script>

<style>
.block{
width:50px;
height:50px;
background:#ff0000;    
margin-bottom:20px;
}
</style>

<div class="block 1"></div>

Answer 1

Try the link bellow:

http://jsfiddle.net/bTYb8/1/

EDIT:

i’ve reset your example in the link bellow but it seems to work so i’m not exactly sure in what way you want it to behave differently

http://jsfiddle.net/bs32V/2/