登录  /  注册
首页 > web前端 > js教程 > 正文

jQuery 的 slideUp 和 slideDown 动画效果的实现

巴扎黑
发布: 2017-06-29 11:43:39
原创
1388人浏览过
<span style="color: #006600; font-style: italic; "><br></span>
登录后复制

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

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


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

<span style="color: #006600; font-style: italic; "><br></span>
登录后复制
// 线程 IDs var mouseover_tid = [];
登录后复制
var mouseout_tid = [];
登录后复制
  jQuery(document).ready(function(){
登录后复制
	jQuery('#menus &gt; 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 的 slideUp 和 slideDown 动画效果的实现的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号