分享一些常用的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 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
使用javascript插入样式
Mar 14 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
用js实现放大镜效果
Oct 28 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 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中jpgraph类库的使用介绍
2013/08/08 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
php中 $$str 中 "$$" 的详解
2015/07/06 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
VBScript版代码高亮
2006/06/26 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
python自动化办公操作PPT的实现
2021/02/05 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
杭州时比特电子有限公司SQL
2013/08/22 面试题
教学个人的自我评价分享
2014/02/16 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
一年级班主任感言
2014/03/08 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
独生子女证明范本
2015/06/19 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
详解Redis主从复制实践
2021/05/19 Redis
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
vue实现拖拽交换位置
2022/04/07 Vue.js