遇到jQuery 中的 slideUp ，slideToggle和 slideDown 动画重复执行

最新推荐文章于 2022-09-03 00:33:29 发布

dongyou0923

最新推荐文章于 2022-09-03 00:33:29 发布

阅读量3.3k

点赞数

分类专栏： jquery 文章标签： jquery 动画鼠标

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

说明

jQuery 可以通过调用 animate 方法添加动画效果, 而且还提供了一套别名, 使用起来很是方便. 其中 slideDown和 slideUp 两方法的作用是纵向展开和卷起一个页面元素, 被使用的几率很高, 却一直存在一个小问题.

如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行, 相当不美观演示页面中有一个按钮, 请用鼠标迅速地来回划过…

如果用 jQuery 来实现这样的效果, 该如何处理呢?
其实很简单, 只需在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题. 例如: 当鼠标滑过按钮后 0.2 秒, 菜单才会展开, 如果鼠标离开按钮, 展开的处理将被终止. 也就是说, 想要展开菜单鼠标必须有 0.2 秒的事件停留在按钮上, 那么迅速地划过按钮是无法执行展开事件的. 卷起也是如此.

代码演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    p {display: none;}
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li>
                <h1>
                    aaaaaa
                </h1>
                <p>
                    this is aaaa test. this is aaaa test. this is aaaa test. this is aaaa test.
                </p>
            </li>
            <li>
                <h1>
                    bbbbb
                </h1>
                <p>
                    this is bbbbb test. this is bbbbb test. this is bbbbb test. this is bbbbb test.
                </p>
            </li>
            <li>
                <h1>
                    cccccc
                </h1>
                <p>
                    this is bbbbb test.
                </p>
            </li>
            <li>
                <h1>
                    ddddddd
                </h1>
                <p>
                    this is ddddddd test.
                </p>
            </li>
        </ul>
    </div>
    <script src="//cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
    <script>

    var mouseover_tid = [];
    var mouseout_tid = [];

    $(document).ready(function() {

        $('#menu li').each(function(index) {

            $(this).hover(
                // 鼠标进入        
                function() {
                    var _self = this;
                    // 停止卷起事件      
                    clearTimeout(mouseout_tid[index]);
                    // 当鼠标进入超过 0.2 秒, 展开菜单, 并记录到线程 ID 中        
                    mouseover_tid[index] = setTimeout(function() {
                        $(_self).find('p').slideDown(500);
                    }, 200);
                },
                // 鼠标离开             
                function() {

                    var _self = this;

                    // 停止展开事件          
                    clearTimeout(mouseover_tid[index]);

                    // 当鼠标离开超过 0.2 秒, 卷起菜单, 并记录到线程 ID 中            
                    mouseout_tid[index] = setTimeout(function() {
                        jQuery(_self).find('p').slideUp(500);
                    }, 200);
                }
            );
        });
    });
    </script>
</body>

</html>

参考 : 文档

dongyou0923

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
遇到jQuery 中的 slideUp ，slideToggle和 slideDown 动画重复执行

说明 jQuery 可以通过调用 animate 方法添加动画效果, 而且还提供了一套别名, 使用起来很是方便. 其中 slideDown和 slideUp 两方法的作用是纵向展开和卷起一个页面元素, 被使用的几率很高, 却一直存在一个小问题. 如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行, 相当不美观演示页面中有一个按钮, 请用鼠标迅速
复制链接

扫一扫

专栏目录