slideDown()、slideUp()反复执行的问题

最新推荐文章于 2022-04-16 18:18:48 发布

weixin_33696106

最新推荐文章于 2022-04-16 18:18:48 发布

阅读量204

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mary-123/p/10522549.html

版权

 <ul class="main">
            <li><a href="#">菜单一</a>
                <ul>
                    <li><a href="">子菜单1</a></li>
                    <li><a href="">子菜单2</a></li>
                    <li><a href="">子菜单3</a></li>
                </ul>
            </li>
            <li><a href="#">菜单二</a>
                <ul>
                    <li><a href="">子菜单1</a></li>
                    <li><a href="">子菜单2</a></li>
                    <li><a href="">子菜单3</a></li>
                </ul>
            </li>
            <li><a href="#">菜单三</a>
                <ul>
                    <li><a href="">子菜单1</a></li>
                    <li><a href="">子菜单2</a></li>
                    <li><a href="">子菜单3</a></li>
                </ul>
            </li>
        </ul>

stop()方法来停止重复动画
jQuery(document).ready(function($) {
            $(".main>li").hover(function() {
                $(this).children("ul").slideDown();
            }, function() {
                $(this).children("ul").stop(true,false).slideUp();
            });                                             
        });

stop([clearQueue],[jumpToEnd]);
clearQueue:如果设置成true，则清空队列，可以立即结束动画。
jumpToEnd:如果设置成true，则完成队列，可以立即完成动画。可选，默认是false

使用toggle()方法替代
jQuery(document).ready(function($) {
            $(".main>li").hover(function() {
                $(this).children("ul").toggle();
            });
        });

转载于:https://www.cnblogs.com/mary-123/p/10522549.html