jQuery – 鼠标经过(hover)事件的延时处理

最新推荐文章于 2021-06-09 12:13:10 发布

weixin_34367257

最新推荐文章于 2021-06-09 12:13:10 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yeminglong/p/5753339.html

本文介绍了一个使用jQuery实现的延时hover效果插件，通过利用window下的setTimeout方法，实现了鼠标悬停和离开元素时的延时响应功能。该插件接受四个参数：鼠标经过的延时时间、鼠标移出的延时时间、鼠标经过时执行的方法及鼠标移出时执行的方法。

说到延时，离不开window下的setTimeout方法，本实例的jQuery方法的核心也是setTimeout。代码不长，完整如下:

(function ($) {
            $.fn.hoverDelay = function (hoverEvent, outEvent) {
                var hoverTimer, outTimer;
                return $(this).each(function () {
                    $(this).hover(function () {
                        var t = this;
                        clearTimeout(outTimer);
                        hoverTimer = setTimeout(function () {
                            hoverEvent.call(t);
                        }, 200);
                    }, function () {
                        var t = this;
                        clearTimeout(hoverTimer);
                        outTimer = setTimeout(function () {
                            outEvent.call(t);
                        }, 200);
                    });
                });
            }
        })(jQuery);