Below I have some code which basically animates a div from the bottom of

Question

0

Asked: May 23, 20262026-05-23T02:59:28+00:00 2026-05-23T02:59:28+00:00

Below I have some code which basically animates a div from the bottom of

0

Below I have some code which basically animates a div from the bottom of the page to the top. When I hover over the div I want the animation to stop immediately and give the div an opacity value of 0.25. When the mouse leaves the div I want the animation to continue.

Right now the animation doesn’t stop and the opacity value is given after the animation is finished and not immediately which is what I want.

So how do I get the result I want?

<!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>