<p>I am trying to fade in a <p> on mouseover and fade out on mouseout:</p>

<pre><code>  $("p.follow").mouseover(function(){
        $(this).fadeTo("slow", 1.00);
})
$("p.follow").mouseout(function(){
        $(this).fadeTo("fast", 0.50);
})
</code></pre>

<p>If you go to ryancoughlin.com and on the right side, if you go over it you will see what I mean, it is almost as if it is stuck and keeps fading in.</p>

<p>Any ideas?</p>

Try this:
```
```
$("p.follow").hover(function()
   {
      $(this).stop().fadeTo("slow", 1.00);
   },
   function()
   {
      $(this).stop().fadeTo("fast", 0.50);
   });
```
```
Two key differences: I use the jQuery
```
hover
```
event to associate mouseover and mouseout event handlers such that child elements won't result in confusing behavior, and i use the
```
stop()
```
function to prevent animations from overlapping and canceling each other out.