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);
}
);
});
});
相关推荐
怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY() 属性,给需要动画的元素添加上一个动画class。 先上效果图: 1.蒙层的结构: <!-- 购物车蒙层 --> ...
这里结合实例形式总结分析了jQuery中slidedown与slideup方法用法。分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
jQuery动画上下滑动效果在网页中的应用还是比较广泛的,其实很简单通过slideUp slideDown方法便可轻松实现,具体如下,喜欢的朋友可以参考下,希望对大家学习jquery有所帮助
主要介绍了jQuery操作动画,结合完整实例形式分析了jquery针对页面元素动画效果相关实现技巧,涉及jquery slideUp与slideDown方法的使用,需要的朋友可以参考下
jQuery中slideUp 、slideDown、animate等动画运用时,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,其表现不雅。 则解决办法: 1、在触发元素上的事件设置为延迟处理, ...
Vanilla JavaScript微型函数,用于对用ES6编写的元素进行动画slideUp / slideDown。 该行为等同于jQuerys的slideUp和slideDown方法。 它使用requestAnimationFrame并且没有外部依赖关系。 在此处查看演示: : ...
- 滑入(slideUp)与滑出(slideDown)与切换(slideToggle)--滑动效果动画组,效果与卷帘门类似。 - 淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)与渐变指定透明度(fadeTo)--淡入淡出动画组。 1、三组基本动画 $...
其中,使用show()方法控制元素的显示,使用hide()方法控制元素的隐藏,使用toggle()方法切换元素的可见状态,使用fadeIn()方法和fadeOut()方法实现元素的淡入和淡出,使用slideUp()方法和slideDown()方法实现元素的...
jquery里的fadein,fadeout,slidedown,slideup都在这里应用了,真是巧妙。 这个动画是我的好朋友郭先生让我见识的,他是一家零件厂的老板,大家可以欣赏下他的网站http://www.celestra.cn/。郭先生这个网站策划得挺...
滑动元素 一个、可访问的、基于 Promise 的、令人联想到 jQuery 的库,用于具有动态高度打开和关闭的滑动元素。 要查看它的实际效果,请查看以下演示:为什么? 使用 JavaScript 使元素打开和关闭的动画传统上并不是...
以前用过jquery的slideUp,slideDown,等许多很不错的方法,感觉很容易就能实现页面元素的动画效果!
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
slideDown()与slideUp()方法 slideToggle()方法 fadeIn()和fadeOut()方法 fadeTo()方法 简单的动画 移动位置的动画 队列中的动画 动画停止和延时 动画方式浏览图片 第6章 传统的JavaScript方法实现Ajax功能...
$().toggle():显示和隐藏效果切换 都可以传入参数,speed. fadeOut(淡出) fadeIn(淡入) fadeToggle();淡入淡出切换 fadeTo(2000,0.3)将图片显示到透明度为30%的程度 滑动显示 slideDown(): slideUp(): ...
它的工作方式类似于jQuery的slideToggle(),slideDown()和slideUp(),但不使用display:none。 使用CSS3过渡和element.scrollHeight设置高度未知的元素的高度的动画。 也是一回事。 特征: 滑动高度已知或...
部分jQuery常用的动画函数,整理了一下,在做交互式页面的时候挺有用的 .css('a','12px'); .css({ a:'12px', b:'#fff' }); .show(); .hide(); .toggle(); .fadeIn(); .fadeOut(); .fadeToggle(); .slideDown(); ....
jQuery 滑动方法:您可以在元素上创建滑动效果。slideDown() 向下滑动元素。slideUp() 向上滑动元素。...jQuery 动画 – jQuery animate() 方法用于创建自定义动画。语法:$(selector).animate({params},spee
5.1.1 show()与hide()方法 5.1.2 动画效果的show()与hide()方法 5.1.3 toggle()方法 5.2 滑动 5.2.1 slidedown()与slideup方法 5.2.2 slidetoggle()方法 5.3 淡入淡出 5.3.1 fadein...