leesen

首先放代码(代码源于网络)

$(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 that = this;
            $(this).hover(function(){
                clearTimeout(outTimer);
                hoverTimer = setTimeout(function () { if (typeof sets.hoverEvent == \'function\') sets.hoverEvent.call(that) }, sets.hoverDuring);
            },function(){
                clearTimeout(hoverTimer);
                outTimer = setTimeout(function () { if (typeof sets.outEvent == \'function\') sets.outEvent.call(that) }, sets.outDuring);
            });    
        });
    }      
});

这个扩展方法的核心内容便是setTimeout,在鼠标移入的时候绑定hoverTimer,移开清除hoverTimer

首先定义一个defaults对象,定义了移入和移出的延迟时间,和移入移出的事件,事件内为$.noop()这个空函数

该方法接受一个参数 options

然后用$.extend方法用options扩展了defaults,并且保存到sets中,这样使得你能在调用的时候自定义defaults的属性和方法

然后就是hover()方法了

调用的时候

    $(\'#art_tit0 li\').hoverDelay({
        hoverEvent:function(){
            var index = $(this).index();
            $(this).addClass(\'cur\').siblings().removeClass(\'cur\');
            $(\'#art_con0 div.allic\').hide().eq(index).fadeIn(\'fast\');
        }
    });

 

分类:

技术点:

相关文章:

  • 2021-09-22
  • 2022-12-23
  • 2021-05-24
  • 2021-05-25
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-12-26
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-09
相关资源
相似解决方案