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

从开始工作到现在,已近三个多月了,时间飞快,并且是越来越快,像天上掉下来的石头,但在掉落的过程中 适当的摆个Pose或者做一些趣味性的事情,也是会给生活增加一些色彩的。

代码如下:

(function($){
    $.fn.hoverDelay = function(options){
        var defaults = {
            hoverDuring: 200,
            outDuring: 200,
            hoverEvent: function(){
                $.noop();//这个函数表示什么也不做
            },
            outEvent: function(){
                $.noop();//这个函数表示什么也不做
            }
        };
        var sets = $.extend(defaults,options || {});
        var hoverTimer, outTimer;
        return $(this).each(function(){
        	var t = this;
            $(this).hover(function(){
                clearTimeout(outTimer);
                hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
                hoverTimer = setTimeout(function(){sets.hoverEvent.apply(t);}, sets.hoverDuring);
            },function(){
                clearTimeout(hoverTimer);
                outTimer = setTimeout(sets.outEvent, sets.outDuring);
                outTimer = setTimeout(function(){sets.outEvent.apply(t);}, sets.outDuring);
            });
        });
    };
})(jQuery);

你可以到这里看原作者的代码。

刚开始,我是直接拿来作者的代码使用的,但是在使用的过程中发现有点问题,使用格式如下:

$('#crossyou').hoverDelay({
         hoverEvent:function(){
             //这里书写鼠标移上去的事件
         },
         outEvent:function(){
           //这里书写鼠标移出去的事件
         }
});

很明显,原作者的写法并没有将this(也就是#crossyou对象)传递进 hoverEvent  outEvent中,所以这样的话你若在hoverEvent  outEvent中使用this的话,他是指向window这个对象的,而并不是你想要的#crossyou对象,于是通过apply()将hoverEvent和outEvent方法绑定到#crossyou对象就可以了(属性和方法是不能独立存在的,必须依附于一个对象存在,使用apply可以改变方法或属性所依附的对象)。

这篇文章目前有5条评论。

  1. Firm CHINA Google Chrome Windows 2010-10-12 19:42

    jQuery可玩的花样真多

    板凳党 !
    • admin CHINA Mozilla Firefox Windows 2010-10-12 22:11

      不过发现越玩jQ,jS倒是越不熟了。

  2. 快播 Internet Explorer Windows 2010-10-14 18:47

    不会玩的路过~

    地板砖 !
  3. micheal Mozilla Firefox Windows 2011-10-05 21:11

    在hoverEvent中如何取得this对象 (烧香)

    4 #
回复

(必填项)

(必填项)

(可选)