CrossYou'Blog

从开始工作到现在，已近三个多月了，时间飞快，并且是越来越快，像天上掉下来的石头，但在掉落的过程中 适当的摆个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可以改变方法或属性所依附的对象)。