disabling animation while hovering
<p>Below I have some code wich basicly 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</p>

<p>Right now the animation doesnt stop and the opacity value is given after the animation is finished and not immediately wich is what I want.</p>

<p>So how do I get the result I want?</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt; 
#bubble{ 
border-radius:20px;
margin:3px; 
width:40px; 
height:40px;
position:absolute;
left:0px; 
top:1000px;
background:green; 
display:none; 
}
&lt;/style&gt;
 &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="bubble"&gt;&lt;/div&gt;
&lt;script&gt;
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() {});
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
