Heim > Web-Frontend > js-Tutorial > Implementierung der jQuery-Animationseffekte slideUp und slideDown

Implementierung der jQuery-Animationseffekte slideUp und slideDown

巴扎黑
Freigeben: 2017-06-29 11:43:39
Original
1640 Leute haben es durchsucht
<span style="color: #006600; font-style: italic; "><br></span>
Nach dem Login kopieren

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

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


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

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

Das obige ist der detaillierte Inhalt vonImplementierung der jQuery-Animationseffekte slideUp und slideDown. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage