jQuery hover 延时显示$.fn.hoverDelay (fnOver, fnOut,timeIn,timeOut) ;

先看jQuery hover源代码：

-----------------------------------------

 

(function($) {

    $.fn.hoverDelay = function(fnOver, fnOut,timeIn,timeOut) {

 

                var timeIn = timeIn || 200,

                    timeOut = timeOut || 200,

                    fnOut = fnOut || fnOver;

 

                var inTimer = [],outTimer=[];

                

            return this.each(function(i) {

                $(this).mouseenter(function() {

                        var that = this;

                        clearTimeout(outTimer[i]);

                        inTimer[i] = setTimeout(function() {

                            fnOver.apply(that);

                        }, timeIn);

                  }).mouseleave( function() {

                        var that = this;

                        clearTimeout(inTimer[i]);

                        outTimer[i] = setTimeout(function() {

                            fnOut.apply(that)

                        }, timeOut);

                 });

        })

    }; 

 

})(jQuery);

 

--------------------------------------------------

实例：

 

--------默认值-------

$("li").hoverDelay(

  function () {

    $(this).addClass('green');

  }, 

  function () {

    $(this).removeClass('green');

  }

);

 

 

-------------------------------

$("li").hoverDelay(

  function () {

    $(this).addClass('green');

  }, 

  function () {

    $(this).removeClass('green');

  },1000,500

);

 

 

如有错误欢迎指出，共同学习。

 

完整测试用例下载：http://115.com/file/c2aun17s#hoverdalay.html

转载于:https://www.cnblogs.com/piuba/archive/2012/12/14/2818336.html