jQuery 的 slideUp 和 slideDown 动画
2013-11-28 14:54
225 查看
jQuery 可以通过调用
animate方法添加动画效果, 而且还提供了一套别名, 使用起来很是方便. 其中
slideDown和
slideUp两方法的作用是纵向展开和卷起一个页面元素, 被使用的几率很高, 却一直存在一个小问题.
如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行, 相当不美观 演示页面中有一个按钮, 请用鼠标迅速地来回划过...
如果用 jQuery 来实现这样的效果, 该如何处理呢?
其实很简单, 只需在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题. 例如: 当鼠标滑过按钮后 0.2 秒, 菜单才会展开, 如果鼠标离开按钮, 展开的处理将被终止. 也就是说, 想要展开菜单鼠标必须有 0.2 秒的事件停留在按钮上, 那么迅速地划过按钮是无法执行展开事件的. 卷起也是如此.
// 线程 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 动画特效show() hide() slideUp() slideDown() fadeIn() fadeOut() animate() stop() delay()
- 遇到jQuery 中的 slideUp ,slideToggle和 slideDown 动画重复执行
- jQuery-动画效果animate() slideDown() slideUp() fadeIn() fadeOut()
- 4.2.3: jQuery动画之slideUp()方法和slideDown()方法
- jQuery 的 slideUp 和 slideDown 动画(转)
- 转:遇到jQuery 中的 slideUp ,slideToggle和 slideDown 动画重复执行
- JQuery 向下展开收起动画( slideDown(),slideUp() )
- jQuery中的slideUp()、slideDown()、hide()、show()
- jQuery中slideUp 和 slideDown 的点击事件
- jQuery动画效果-slideUp slideDown上下滑动示例代码
- jQuery 效果 - 滑动 slideDown()与slideUp()与slideToggle()
- jQuery中的slideUp()、slideDown()、hide()、show()
- jQuery动画效果-slideUp slideDown上下滑动示例代码
- jQuery动画效果(show与hide/toggle/slideUp/slideToggle/fadeIn/fadeTo)
- jquery的hide(),show(),fastIn(),fastOut(),slideUp(),slideDown()的使用
- jQuery 效果 - 滑动slideDown()、slideUp()、slideToggle()
- IE8中Jquery slideUp、slideDown方法由Position属性引起的Bug
- jquery的slideUp、slideDown函数在IE中的bug
- jquery 连写注释;siblings() 方法;jQuery 的3种滑动方法;slideUp()向上滑动;slideDown()向下滑动;slideToggle()来回滑动
- 动画---4.2.3: slideUp()方法和slideDown()方法