jQuery实现鼠标经过事件的延时处理效果

2024-05-06 16:24:50

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了jQuery实现鼠标经过事件的延时处理效果，需要的朋友可以参考下

jQuery鼠标经过(hover)事件的延时处理，具体JS代码如下：

(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(){

      $(this).hover(function(){

        clearTimeout(outTimer);

        hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);

      },function(){

        clearTimeout(hoverTimer);

        outTimer = setTimeout(sets.outEvent, sets.outDuring);

      });

    });

  }

})(jQuery);