Desvanecimiento y devolución de llamada de jQuery: aparecen dos elementos cuando la acción se realiza rápidamente

Es un problema simple, pero parece que no puedo resolverlo. Tengo este código, prácticamente se explica solo:

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

Funciona muy bien, pero cuando paso rápido por todos los elementos, se rompe. Ambos p.hidden and form son visibles. Traté de agregar stop() a algunas acciones aquí, pero no ayudó.

¿Alguna sugerencia?

editar

Según lo solicitado, HTML para .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>

preguntado el 12 de junio de 12 a las 17:06

Continúe y ponga su html aquí también. -

Está bien, está ahí. Tenga en cuenta que esas entradas se convierten mediante el complemento de calificación de estrellas. -

1 Respuestas

Lo más fácil sería add .stop() a la devolución de llamada también se desvanece. Cambiando .fadeIn() a .fadeTo() debe asegurarse de que el elemento de calificación siempre se desvanezca por completo (que era el problema). Nunca tuve un problema con el .hidden el elemento no se desvanece correctamente (lo cual tiene sentido) pero podría usar .fadeTo() ahí por si acaso.

Aquí hay un violín de ejemplo: http://jsfiddle.net/36SCH/

Respondido el 12 de junio de 12 a las 18:06

Parece estar funcionando bien, pero intente hacerlo rápido un par de veces. Se congela y no vuelve a su forma. - tomek buszewski

Resolví el problema con tu respuesta tachada :) Agregando .stop() antes de cada fadeIn() and fadeOut() Hizo el truco. - tomek buszewski

Me alegro de que te esté funcionando. Aquellos .stop()s son definitivamente necesarios, el .fadeTo()fue solo para contrarrestar un problema que noté en el que el formulario podía atascarse al 50% de opacidad. Si no lo necesitas, ¡genial! :) - stuart madrigueras

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.