jQuery prevent flickering of child on hover
<p>I'm having troubles when I hover an element and then hover an inside element. I don't know if its the best way to do what I'm trying to achieve. Here's my code:</p>

<p>My markup:</p>

<pre><code>&lt;div class="wrapper"&gt;  
   &lt;div class="animation"&gt;  
     &lt;a href="#" class="linked"&gt;&lt;img src="#"/&gt;&lt;/a&gt;  
     &lt;h1 class="title hidden"&gt;&lt;a href="#"&gt;blabla&lt;/a&gt;&lt;/h1&gt;  
   &lt;/div&gt;  
&lt;/div&gt;
</code></pre>

<p>My js:</p>

<pre><code>$('.animation a img').hover(function(){
        $(this).parent().next().stop().fadeTo("medium", 1);  
        $(this).stop().fadeTo("fast", 0);  
    }, function(){  
        $(this).parent().next().stop().fadeTo("medium", 0);  
        $(this).stop().fadeTo("fast", 1);   
    });  
</code></pre>

<p>CSS:</p>

<pre><code>    #wrapper {margin: 0 auto; width: 960px;}
    #hidden {display: none;}
    h1 a {bottom: 0; float: left; font-size: 1.5em; left: 0; position: absolute; width: 460px;}
    .linked {background: #666; float: left; height: 250px;}
</code></pre>

<p>The flickering starts when I hover the H1. Is there any way to disable or fix it?</p>

<p>Thanks in advance!</p>
