Jquery 悬停时禁用动画_Jquery

Jquery 悬停时禁用动画

jquery

Jquery 悬停时禁用动画,jquery,Jquery,下面我有一些代码，基本上是从页面底部到顶部设置一个div的动画。当我将鼠标悬停在div上时，我希望动画立即停止，并将div的不透明度值设置为0.25。当鼠标离开div时，我希望动画继续现在动画不会停止，不透明度值在动画完成后给出，而不是立即给出，这正是我想要的那么我怎样才能得到我想要的结果呢 <!DOCTYPE html> <html> <head> <style> #bubble{ border-radius:20px; margin:3

下面我有一些代码，基本上是从页面底部到顶部设置一个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>


#气泡{
边界半径：20px；
保证金：3倍；
宽度：40px；
高度：40px；
位置：绝对位置；
左：0px；
顶部：1000px；
背景：绿色；
显示：无；
}
函数runIt（）{
$（'气泡'）.show（0）；
$（#bubble'）。设置动画（{top:'-=1000px'，}，5000）；
$（'#bubble'）。动画（{top:'+=1000px'，}，0）；
$（'气泡'）.hide（“正常”，runIt）；
}
runIt（）；
$（'#bubble'）。悬停（函数（）{
$（“#气泡”）。设置动画({
不透明度：0.25，
}，500，函数（）{}）；
});

在悬停事件中，您需要调用。（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>


函数runIt（）{
$（'气泡'）.show（0）；
$（'#bubble'）。动画（{top:'-=1000px'}，5000）；
$（'#bubble'）。动画（{top:'+=1000px'}，0）；
$（'气泡'）.hide（“正常”，runIt）；
}
runIt（）；
$（'#bubble'）。悬停（函数（）{
$（this）.stop（true，false）；
$（此）。设置动画({
不透明度：0.25，
}, 500);
}，函数（）{
runIt（）；
});

在悬停事件中，您需要调用。（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>


函数runIt（）{
$（'气泡'）.show（0）；
$（'#bubble'）。动画（{top:'-=1000px'}，5000）；
$（'#bubble'）。动画（{top:'+=1000px'}，0）；
$（'气泡'）.hide（“正常”，runIt）；
}
runIt（）；
$（'#bubble'）。悬停（函数（）{
$（this）.stop（true，false）；
$（此）。设置动画({
不透明度：0.25，
}, 500);
}，函数（）{
runIt（）；
});

您正在寻找的。您可以使用它停止在

mouseover

上的选定元素上运行的任何动画（并可以选择使其立即转到动画的逻辑端），并在

hover（）

的

mouseout

组件上重新启动动画

但是，查看您的代码，您使用的是增量动画（即使用

+=1000px

而不是像

1000px

这样的固定值）。因此，您必须以某种方式跟踪动画的进度，并在

mouseout

上应用调整后的增量

例如，如果

#bubble

正在设置动画，然后将鼠标悬停在其上，您应该能够确定它已经移动了

300px

，并在继续时调用调整后的

.animate（{top:'-=700px'}）

如果对动画使用固定值，只需在“继续”按钮上再次调用原始动画应该不会有问题。

您正在查找的动画。您可以使用它停止在

mouseover