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/p/2818336.html