在MooTools中实现 jQuery’s hover() 方法

在jQuery中提供一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。它接受了两个函数,代表鼠标的mouseover 和 mouseout事件。

当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数,这两个函数正好是我们MooTools 的 fade()方法(即淡入淡出特效)。

以下就是我们 通过对 MooTools Elements 的扩展实现的.

The MooTools Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
 /* hover! */
Element.implement({
	'hover': function(fn1,fn2) {
		return this.addEvents({
			'mouseenter': function(e) {
				fn1.attempt(e,this);
			},
			'mouseleave': function(e) {
				fn2.attempt(e,this);
			}
		})
	}
});

我们扩展的hover(),它能接受两个方法; 那就是我们要求的mouseover和mouseleave事件。每个方法是对应的是相应的事件。

The Usage

1
2
3
4
5
6
/* fade in and out on hover event */
$('hover-me').hover(function(e) {
	this.fade('out');
}, function(e) {
	this.fade('in');
});

演示:

MooTools hover() Demo

站点统计