jQuery延迟执行的方法,常用于TAB效果和各种切换效果
首先放代码(代码源于网络)
$(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'); } });