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

说到延时,离不开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);

基本上都是代码在撑页面,说点有用的东西吧。
hoverDelay方法共四个参数,表示意思如下:

hoverDuring       鼠标经过的延时时间
outDuring          鼠标移出的延时时间
hoverEvent        鼠标经过执行的方法
outEvent         鼠标移出执行的方法

原文地址:https://www.cnblogs.com/yeminglong/p/5753339.html