[jquery] Como interrumpir el efecto slideDown()

chefnelone · #1 (**permalink**) 22/09/2010, 11:24

Hola a todos,

Tengo esta funcion que la estoy usando para desplegar un menu.
Cuando paso el puntero sobre li ejecuta un slideDown para mostrar un contenido. En principio funciona bien pero me gustaría que si quito el puntero cuando aún no se ha completado el slideDown (o sea antes de los 500 milisegundos) comience el slideUp.

Con esto evito que cuando se pase el puntero sobre varios li se estén abriendo totalmente.

Código Javascript:

Ver original$(" li").hover(function(){
        $(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(500);
    },function(){
            $(this).find('ul:first').slideUp(100);
    });

gracias

Dany_s · #2 (**permalink**) 23/09/2010, 08:05

postea el html asi pruebo entiendo bien el problema

chefnelone · #3 (**permalink**) 27/09/2010, 01:05

Cita:

Iniciado por Dany_s

postea el html asi pruebo entiendo bien el problema

es una lista desordenada:

Código HTML:

<ul>
  <li>1</li>
   <ul>
     <li>1.a</li>
     <li>1.b</li>
   </ul>
  <li>2</li>
</ul>

Dany_s · #4 (**permalink**) 27/09/2010, 05:54

aunque no tenga que ver con el efecto no es correcto anidar de esa forma los ul

te dejo una solición con animate

Código HTML:

Ver original<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Prueba</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#menu>li').hover( function (){
                    div = $('div', this);
                    div.animate({height: $('ul', div).height()+'px'}, { queue:false, duration:500 });
                }, function (){
                    $('div', this).animate({height: '0px'}, { queue:false, duration:500 });
                });
            })
        </script>
    </head>
    <style>
        ul{width:150px}
        ul>li{background:green}
        ul li>div{height:0px; overflow:hidden; background:blue}
    </style>
    <body>
<ul id="menu">
    <li>1
        <div>
            <ul>
                <li>1.a</li>
                <li>1.b</li>
            </ul>
        </div>
    </li>
    <li>2
        <div>
            <ul>
                <li>2.a</li>
                <li>2.b</li>
                <li>2.c</li>
                <li>2.d</li>
            </ul>
        </div>
    </li>
    <li>3
        <div>
            <ul>
                <li>3.a</li>
                <li>3.b</li>
            </ul>
        </div>
    </li>
    <li>4
        <div>
            <ul>
                <li>4.a</li>
                <li>4.b</li>
            </ul>
        </div>
    </li>
</ul>
    </body>
</html>