(@_@;)我是程序猿,我编程,我快乐,知识改变命运,技术成就梦想   oh yeah!合作VX "w6668263" 联系Email:ye583025823@126.com

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         鼠标移出执行的方法

posted on 2016-08-09 15:17  一个草率的龙果果  阅读(2586)  评论(0编辑  收藏  举报

导航