停止后启动动画

Question

下面的代码停止动画，我希望能够再次启动它，在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
});

Answer 1

我认为您正在尝试访问未定义的范围内的命名函数？

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();
});

我创建了this example，这可以帮助您迭代到有效的解决方案。

Answer 2

尝试悬停以激活动画。

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