Question

It’s simple problem, but I can’t seem to solve it. I have this code, it pretty much explains itself:

    $('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')
        })
    })

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

Any suggestions?

— edit —

As requested, HTML for .userrate:

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

Answer 1

Easiest thing would be to add .stop() to the callback fades as well.
Changing .fadeIn() to .fadeTo() should ensure the rating element is always faded all the way in (which the the problem was getting). Never had a problem with the .hidden element not fading out properly (which makes sense) but you could use .fadeTo() there in case.

Here is an example fiddle: http://jsfiddle.net/36SCH/