Ejecucion de jquery a medias

[vorox]

Hola amigos!

Tengo un menu en el que aplico los siguientes efectos:

<script>
$(function(){
$('.primer_nivel a').hover(function () {
$(this).stop().animate({
backgroundColor: "#fff",
color: "#000"
}, 400);
},function() {
$(this).stop().animate({
backgroundColor: "#000",
color:"#fff"
}, 400);
});
});

$(function(){
$('.primer_nivel').hover(function () {
$(this).find('.submenu').stop().slideToggle('slow' );
});
});

$(function(){
$('.submenu .segundo_nivel').hover(function () {
$(this).find('.submenu2').stop().slideToggle('fast ');
});
});
</script>

La primera funcion simplemente cambia el color. El tema es que en la tercera función, si paso el ratón rapidamente desde un elemento de primer nivel a uno de segundo nivel a veces me realiza la animación slideToggle a medias i solo se ve la mitad de esas pestañas. Saben a que puede ser debido???

Gracias de antemano!!

[abimaelrc]

Desconozco, pero ¿si aplicas algún reset cuando salgas completamente de los tags? También desconozco como lograr un reset, tal vez alguna persona con más experiencia pueda indicarte, pero si quieres puedes ir adelantando como lograr hacer un reset de la animación.

[vorox]

Eso estaria bien.. Gracias por tu aporte

[NUCKLEAR]

Deberias aprender a preguntar, yo entiendo lo que quieres hacer, pero ese script es inleible...
Pon todo completo, el html que usas, la porción de css si usas algo y obviamente el script... http://jsfiddle.net/

[vorox]

Tienes razón Nucklear. Aqui va el código:

Javascript:

<script type="text/javascript">

$(function(){
$('.primer_nivel').hover(function () {
$(this).find('.submenu').stop().slideToggle('slow' );
});
});

$(function(){
$('.segundo_nivel').hover(function () {
$(this).find('.submenu2').stop().show('slow');
},function(){
$(this).find('.submenu2').stop().hide('fast');
});
});
</script>

HTML (Menu con 2 niveles internos):

<ul>
<li class="primer_nivel"><a href=""></a></li>
<li class="primer_nivel"><a href=""></a></li>
<li class="primer_nivel">
<a href=""></a>
<ul class="submenu">
<li class="segundo_nivel"><a href=""></a></li>
<li class="segundo_nivel"><a href=""></a></li>
<li class="segundo_nivel"><a href=""></a></li>
<li class="segundo_nivel"><a href=""></a></li>
<li class="segundo_nivel">
<a href="">Muebles de baño >></a>
<ul class="submenu2">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
</ul>

CSS:

nav ul .primer_nivel{
float: left;
margin: 0px 5px;
position: relative;
}
nav ul .primer_nivel:first-child{
margin-left: 0px;
}
nav ul .primer_nivel a{
/*border:1px solid black;*/
border-radius: 5px;
font-family: 'Quicksand', sans-serif;
font-weight: normal;
padding:5px 15px;
color: #fff;
text-decoration: none;
font-size: 16px;
}

nav ul .primer_nivel .submenu{
position: absolute;
display: none;
width: 300px;
z-index: 1000;
margin-top:5px;
left:-5px;
}
.submenu .segundo_nivel{position: relative;}
.submenu .segundo_nivel:first-child{
/*margin-left: 5px;*/
}
.submenu a{
/*padding: 10px 20px 10px 20px;*/
background-color: #000;
color:white;
display: block;
width: 200px;
text-align: center;
margin-top:3px;
}

.submenu2{
position:absolute;
display:none;
left:232px;
top:-5px;
width:200px;
}
.submenu2 li a{margin-top: 1px;}



He probado la herramienta que adjuntabas en el anterior mensaje (jsFiddle, muy buena por cierto) y no me da ese error normalmente, pero cuando entro en el último nivel del menú desaparece rápidamente esa lista (Como si no detectase bien el hover).

Bueno espero sus aportes, saludos!!!

[vorox]

Ya esta solucionado, por si a alguien le interesa, al método stop() de jquery hay que pasarle unos valores booleanos para que la función limpie la cola de animación (primer true) y un segundo valor para que salte al final de la ejecución: stop(true, true)

Fuente: http://api.jquery.com/stop/

Saludos!