jQuery 的 slideUp 和 slideDown 动画

jQuery 可以通过调用 animate 方法添加动画效果, 而且还提供了一套别名, 使用起来很是方便. 其中 slideDown 和 slideUp 两方法的作用是纵向展开和卷起一个页面元素, 被使用的几率很高, 却一直存在一个小问题.

如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行, 相当不美观 (演示页面). 演示页面中有一个按钮, 请用鼠标迅速地来回划过...

不知道本博客的老读者是否记得我写过的一个关于菜单导航的专题, 其中一节讨论的是滚动导航菜单的实现方法 (演示页面), 实现了类似 slideUp 和 slideDown 的效果, 但是不存在上述问题, 因为它的滚动高度是即时计算的, 而 jQuery 作为一个通用框架应用的面很广, 很难做到这一点.

如果用 jQuery 来实现这样的效果, 该如何处理呢?
其实很简单, 只需在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题. 例如: 当鼠标滑过按钮后 0.2 秒, 菜单才会展开, 如果鼠标离开按钮, 展开的处理将被终止. 也就是说, 想要展开菜单鼠标必须有 0.2 秒的事件停留在按钮上, 那么迅速地划过按钮是无法执行展开事件的. 卷起也是如此.

下面我们用代码来解决这个问题.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// 线程 IDs
var mouseover_tid = [];
var mouseout_tid = [];
 
jQuery(document).ready(function(){
	jQuery('#menus > li').each(function(index){
		jQuery(this).hover(
 
			// 鼠标进入
			function(){
				var _self = this;
				// 停止卷起事件
				clearTimeout(mouseout_tid[index]);
				// 当鼠标进入超过 0.2 秒, 展开菜单, 并记录到线程 ID 中
				mouseover_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').slideDown(200);
				}, 400);
			},
 
			// 鼠标离开
			function(){
				var _self = this;
				// 停止展开事件
				clearTimeout(mouseover_tid[index]);
				// 当鼠标离开超过 0.2 秒, 卷起菜单, 并记录到线程 ID 中
				mouseout_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').slideUp(200);
				}, 400);
			}
 
		);
	});
});

看看处理过后的效果.
演示页面

注意: 当鼠标悬停时间小于动画时间时, 同样可能出现反复执行现象, 可以考虑将悬停时间设置比动画时间稍长.

嗯, 问题解决了, 但 jQuery 应该还存在其他类似的问题, 如 fadeIn 和 fadeOut (演示页面), 处理方法类似. 如果你选用 jQuery 发现了这类问题, 又不情愿为此重新写一大段代码, 那这应该算是一个不错的解决办法, 而且效果也还行. 现在本博客的 RSS feed 列表也是这样实现的.

最后, 拓展一下思维. 不知道你是否见过网页上有这样的效果: 当鼠标在某个元素上停顿一定的时候后页面上某些内容会被激活. 这样的效果处理方法和上面说到的其实是大同小异, 有兴趣的同学可自行尝试.