jQuery's fadeOut and callback - two elements shows up when action is made fast
<p>It's simple problem, but I can't seem to solve it. I have this code, it pretty much explains itself:</p>

<pre><code>    $('div.userrate').hover(function() {
        var width = $(this).width();
        $(this).width(width);
        $(this).stop().children('form').fadeOut('fast', function() {
            $(this).next('p.hidden').fadeIn('fast')
        });
    }, function() {
        $(this).children('p.hidden').stop().fadeOut('fast', function() {
            $(this).prev('form').fadeIn('fast')
        })
    })
</code></pre>

<p>It works great, but when I go fast through all the elements, it breaks. Both <code>p.hidden</code> and <code>form</code> are visible. I tried to add <code>stop()</code> to some actions here, but it didn't help.</p>

<p>Any suggestions?</p>

<p>-- edit --</p>

<p>As requested, HTML for .userrate:</p>

<pre><code>&lt;div class="userrate"&gt;    
&lt;form&gt;    
&lt;input class="star {split: 2}" type="radio" disabled="disabled" value="1"&gt;    
&lt;input class="star {split: 2}" type="radio" disabled="disabled" value="2"&gt;    
&lt;input class="star {split: 2}" type="radio" disabled="disabled" value="3"&gt;    
&lt;input class="star {split: 2}" type="radio" disabled="disabled" value="4"&gt;    
&lt;input class="star {split: 2}" type="radio" disabled="disabled" value="5"&gt;    
&lt;input class="star {split: 2}" type="radio" disabled="disabled" value="6"&gt;    
&lt;input class="star {split: 2}" type="radio" disabled="disabled" value="7"&gt;    
&lt;input class="star {split: 2}" type="radio" disabled="disabled" value="8"&gt;    
&lt;input class="star {split: 2}" type="radio" disabled="disabled" value="9" checked="checked"&gt;    
&lt;input class="star {split: 2}" type="radio" disabled="disabled" value="10"&gt;
&lt;/form&gt;    
&lt;p class="hidden"&gt;Skończyłem&lt;/p&gt;    
&lt;/div&gt;
</code></pre>
