How do I make a paragraph reappear and stop the previous animation when the mouse unhovers an element?
<p>I want to make an animation start as soon as I trigger an event for eg in the following code the hover event is not immediate and hence the mouseout event takes ensures that the hover event has completed before starting its own..In other words,I want to terminate the hover event as soon as I mouseout on it...How can I fix this?</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;JQuery(2)&lt;/title&gt;
&lt;style type="text/css"&gt;
.Test1{width:100px;}
&lt;/style&gt;
&lt;script type="text/javascript"  src="jquery.js"&gt;  &lt;/script&gt;
&lt;script type="text/javascript"&gt;

$(document).ready(function() {
$("h2").hover(function(){
    $(".Test1").animate({opacity:0},5000);
},
function(){
        //$(".Test1").stop();

         $(".Test1").animate({opacity:1},5000);
    })
});
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;h2&gt;Family Members&lt;/h2&gt;

&lt;p class="Test1"&gt;This is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a textThis is a text&lt;/p&gt;
</code></pre>

<p>
    </p>

<p><a href="http://jsfiddle.net/LYPRV/1/" rel="nofollow">http://jsfiddle.net/LYPRV/1/</a></p>
