Foros del Web - Ver Mensaje Individual - [jquery] Como interrumpir el efecto slideDown()

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>