Question

下面我有一些代码，基本上可以将页面底部的div设置为顶部。当我将鼠标悬停在div上时，我希望动画立即停止并为div赋予不透明度值0.25。当鼠标离开div时，我希望动画继续

现在动画没有停止，动画结束后给出了不透明度值，而不是立刻就是我想要的。

那么我如何得到我想要的结果？

<!DOCTYPE html>
<html>
<head>
<style> 
#bubble{ 
border-radius:20px;
margin:3px; 
width:40px; 
height:40px;
position:absolute;
left:0px; 
top:1000px;
background:green; 
display:none; 
}
</style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="bubble"></div>
<script>
function runIt() {
$('#bubble').show(0);
$('#bubble').animate({top:'-=1000px',},5000);
$('#bubble').animate({top:'+=1000px',},0);
$('#bubble').hide("normal", runIt);
}

runIt();

$('#bubble').hover(function() {
  $('#bubble').animate({
    opacity: 0.25,
  }, 500, function() {});
});
</script>
</body>
</html>

Answer 1

有一个jQuery pause/resume plugin可以完全满足您的需求。

<强> See this fiddle as an example

Answer 2

在悬停事件中，您需要调用。stop（true，false）。然后在退出函数（当前为空）中，您需要从当前位置重新启动动画。

<script>
function runIt() {
$('#bubble').show(0);
$('#bubble').animate({top:'-=1000px'},5000);
$('#bubble').animate({top:'+=1000px'},0);
$('#bubble').hide("normal", runIt);
}

runIt();

$('#bubble').hover(function() {
  $(this).stop(true, false);
  $(this).animate({
    opacity: 0.25,
  }, 500);
}, function() {
  runIt();
  });
</script>

Answer 3

您正在寻找.stop()。您可以使用它来停止在mouseover上的所选元素上运行的任何动画（并可选择立即转到动画的逻辑结尾），并在mouseout hover()组件上重新启动动画}。

$('#bubble').animate({ 
    // blah
}).hover(function() {
    // stop animation
    $(this).stop().css({ opacity : 0.25 });
}, function () {
    // continue animation
    $(this).css({ opacity : 1.0 }).animate({ /* blah */ });
});

但是，查看代码时，您正在使用增量动画（即使用+=1000px而不是像1000px那样修复的内容。因此，您必须以某种方式跟踪动画的进度，并在mouseout上应用调整后的增量。

例如，如果#bubble是动画，然后您将其悬停在其上，则应该能够确定它已经移动300px，并调用调整后的.animate({ top : '-=700px' })继续。

如果您使用动画的固定值，那么在继续播放时再次调用原始动画应该不会有问题。

在悬停时禁用动画

3 个答案: