jQuery – 鼠标经过(hover)事件的延时处理–修改张鑫旭

鼠标延时效果,张的在我这里不适用,我改成如下,先看效果。学张师傅的,呵呵。

QQ图片20140403153705

先上代码,

$(document).ready(function() {
	$(".dropdown-toggle").parent().hoverDelay({
		hoverEvent : function(that) {
			// console.info(111);
			// console.info($(this).html("<a>adfsad</a>"));
		//	alert(that);
			$(that).addClass("open");
			$(that).children("ul").show();
			//console.log(that);
		},
		outEvent : function(that) {
			$(that).removeClass("open");
			$(that).children("ul").hide();
		}
	});
});
// by zhangxinxu welcome to visit my personal website http://www.zhangxinxu.com
// 鼠标延迟执行方法
// 2010-06-30
// 2010-09-21 绑定当前对象
(function($) {
	$.fn.hoverDelay = function(options) {
		var defaults = {
			hoverDuring : 200,
			outDuring : 200,
			hoverEvent : function() {
				$.noop();
			},
			outEvent : function() {
				$.noop();
			}
		};
		var sets = $.extend(defaults, options || {});
		return $(this).each(function() {
			var hoverTimer, outTimer,that;
			$(this).hover(function() {
				clearTimeout(outTimer);
				that = this;
				hoverTimer = setTimeout(function() {
					sets.hoverEvent.call(null,that)
				}, sets.hoverDuring);
			}, function() {
				clearTimeout(hoverTimer);
				that = this;
				outTimer = setTimeout(function() {
					sets.outEvent.call(null,that)
				}, sets.outDuring);
			});
		});
	}
})(jQuery);

看官看了,觉得一模一样呀,跟张鑫旭的没有什么区别

http://www.zhangxinxu.com/wordpress/?p=906,这是他们的地址。

但是你们要看到书第十二行:
sets.hoverEvent.call(null,that);

这个是关键,张鑫旭的那个延时变量传送不了。因为使用的环境不同。

这个适合普通版本。

同学们都忙,呵呵,我都知道的。

给个下载地址:jquery_hover_settime在线演示

同学们你们可以试试他的,与我这个修改他的。呵呵,加油!

 

未经允许不得转载:智慧,启迪人生 » jQuery – 鼠标经过(hover)事件的延时处理–修改张鑫旭

打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏