Start animation after its been stopped

The code below stops an animation, I would like be able to start it again thou, on mouseleave

$(function animate(){
$(".block").animate({left: '+=500px'}, 2000);
$(".block").animate({left: '0px'}, 1, animate);
});

$(".block").mouseenter(function(){
$(".block").stop( true, false);
});开发者_如何学运维

$(".block").mouseleave(function(){
animate();//This does not work
});

I think you're trying to access a named function in a scope in which it's not defined?

function animate(){
  $(".block").animate({left: '+=500px'}, 2000);
  $(".block").animate({left: '0px'}, 1, animate);
};

$(animate);

$(".block").mouseenter(function(){
  $(".block").stop( true, false);
});

$(".block").mouseleave(function(){
  animate();
});

I've created this example, which may help you iterate to a working solution.

Try Hover to activate the animation.

$(".block").hover(stop(),start());
function stop(){
  $(".block").stop( true, false);
});
function start(){
  $(".block").animate({left: '+=500px'}, 2000);
  $(".block").animate({left: '0px'}, 1, animate);
});