分享一些常用的jQuery动画事件和动画函数


Posted in Javascript onNovember 27, 2015

部分jQuery常用的动画函数,整理了一下,在做交互式页面的时候挺有用的

.css('a','12px');
.css({
 a:'12px',
 b:'#fff'
});
.show();
.hide();
.toggle();
.fadeIn();
.fadeOut();
.fadeToggle();
.slideDown();
.slideUp();
.slideToggle();
.text('string');
.animate({
 a:'40px',
 b:'ccc'
},200)
.fadeTo(600,0.4);

然后又整理了一些animate函数能够操作的css属性,其实也是从网上其他地方找来的(https://3water.com/article/75510.htm):

backgroundPosition
 borderWidth
 borderBottomWidth
 borderLeftWidth
 borderRightWidth
 borderTopWidth
 borderSpacing
 margin
 marginBottom
 marginLeft
 marginRight
 marginTop
 outlineWidth
 padding
 paddingBottom
 paddingLeft
 paddingRight
 paddingTop
 height
 width
 maxHeight
 maxWidth
 minHeight
 maxWidth
 font

 fontSize(在animate函数的css参数指定并不同于标准css属性,例如这个css标准是:font-size。同理上
面很多也是这样的情况)

bottom
 left
 right
 top
 letterSpacing
 wordSpacing
 lineHeight
 textIndent
 opacity

 jQuery动画函数

 jQuery动画函数分三类:

1、基本动画函数:既有透明渐变又有滑动效果,常用动画效果。
2、滑动动画函数:仅使用滑动效果。
3、淡入淡出动画函数:仅使用淡入淡出效果。

一.基本动画函数:

1、show()

显示隐藏匹配元素。这个就是'show( speed, [callback] )'无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。
例如:显示所有段落,$("p").show()

2、show(speed,[callback])

以优雅的动画显示匹配的元素,并且在显示完成后可选择返回一个回调函。可根据指定的速度动态改变每个匹配元素高度、宽度和不透明度。
例如:用缓慢的动画将隐藏的段落显示出来,历时600毫秒,$("p").show(600)

3、hide()

隐藏显示元素。这个就是 'hide( speed, [callback] )'的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西。
例如:隐藏所有段落,$("p").hide()

4、hide(speed,[callback])

以优雅的动画隐藏所有匹配的元素,并在显示完成后可选的触发一个回调函数。可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery1.3中,padding和margin也会有动画,效果更流畅。
例如:用600ms的时间将段落缓慢的隐藏,$("p").hide("slow");

5、toggle

切换元素的可见状态。如果元素时可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
例如:切换所有段落的可见状态,$("p").toggle()

6、toggle(switch)

根据switch参数切花元素的可见状态(true为可见,false为隐藏)。如果switch设为true,则调用show()方法来显示匹配的元素,如果switch设为false则调用hide()来隐藏元素。
例如:切换所有段落的可见状态,varflip=0;$("button").click(function(){$("p").toggle(flip++%2==0);});

7、toggle(speed,[callback])

以优雅的动画切换所有匹配的元素,并在显示完成后可选的触发一个回调函数。可根据指定的速度动态的改变每个匹配元素的高度、宽度和不透明度。jquery1.3,padding和margin也会有动画,效果更流畅。

例如:用200ms将段落迅速切换显示状态,之后弹出一个对话框,$("p").toggle("fast",function(){alert("hello!");});

二.滑动动画函数sliding

1、slideDown(speed,[callback])

通过高度变化(向下增大)来动态的显示所有匹配的元素,在显示完成后可选择的处发一个回调函数。这个动画效果只调整元素的高度,可以是匹配的元素以“滑动”的方式显示出来。在jQuery1.3中,上下的padding和margin也会有动画,效果更流畅。
例如:用600ms缓慢的将段落滑下,$("p").slideDown("slow");

2、slideUp(speed,[callback])

通过高度变化(向上减小)来动态的隐藏所有匹配的元素,在隐藏完成后可选的触发一个回调函数。
例如:600ms缓慢的将段落滑上,$("p").slideUp("slow");

3、slideToggle(speed,[callback])

通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选的触发一个回调函数。
例如:600ms缓慢的将段落滑上或滑下,$("p").slideTogggle("slow");

三.淡入淡出函数Fading

1、fadeIn(speed,[callback])

通过透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选的调用一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
例如:用600ms缓慢的将段落淡入,$("p").fadeIn("slow");

2、fadeOut(speed,[callback])

通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选择的触发一个回调函数。
例如:用600ms缓慢的将段落淡出,$("p").fadeOut("slow");

3、fadeTo(speed,opacity,[callback])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选的出发一个回调函数。
例如:用600ms缓慢将段落的透明度调整到0.66,大约2/3的可见度,$("p").fadeTo("slow",0.66)

四、自定义动画函数Custom

1、animate(params,[duration],[easing],[callback])用于创建自定义动画的函数。这个函数的关键在于制定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如height、top或opacity)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left。而每个属性的值表示这个样式属性到多少是动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是hide、show、toggle这样的字符串值,则会就该属性调用默认的动画形式。

例如:点击按钮后div元素的几个不同属性一同变化,

$("#go").click(function(){
$("#block").animate({
width:"90%",height:"100%",fontSize:"10em",borderWidth:10
},1000);
});

2、stop([clearQueue],[gotoEnd])

停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行clearQueue(Boolean):如果设置成true,则清空队列。可以立即结束动画。gotoEnd(Boolean):让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。

例如:点击Go之后开始动画,点Stop之后会在当前位置停下来:

// 开始动画
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function(){
$(".block").stop();
});
[javascript] view plaincopy
$(document).ready(function(){ 
$(".box h3").toggle(function(){ 
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); 
$(this).addClass("arrow"); 
return false; 
},function(){ 
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); 
$(this).removeClass("arrow"); 
return false; 
}); 
});
Javascript 相关文章推荐
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 #Javascript
谈谈jQuery Ajax用法详解
Nov 27 #Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 #Javascript
基于jquery实现全屏滚动效果
Nov 26 #Javascript
javascript给span标签赋值的方法
Nov 26 #Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 #Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 #Javascript
You might like
php中函数的形参与实参的问题说明
2010/09/01 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
动态控制Table的js代码
2007/03/07 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
Python最长公共子串算法实例
2015/03/07 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
wxPython实现列表增删改查功能
2019/11/19 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
国窖1573广告词
2014/03/21 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
心术观后感
2015/06/11 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
MySQL分布式恢复进阶
2022/07/23 MySQL