jQuery基本动画
jQuery效果
一、基本效果 显示与隐藏(通过控制宽高实现)
1.show() - 显示
* 无参版本 - 不具有动画效果
* show(speed,callback)有参版本 - 具有动画效果
* speed - 设置动画执行的时长,单位为毫秒
* 三个预定义值 - slow|normal|fast
* callback - 当动画执行完毕后执行的函数
2.hide() - 隐藏
* 无参版本 - 不具有动画效果
* hide(speed,callback)有参版本 - 具有动画效果
3.toggle() - 隐藏-显示切换
$("button:first").click(function(){
/*
* show()方法 - 显示
* * show()无参版本 - 不具有动画效果
* * show(speed,[callback])有参版本 - 具有动画效果
* * speed - 设置动画执行的时长,单位为毫秒
* * 三个预定义值 - slow|normal|fast
* * callback - 当动画执行完毕后的函数
*/
$("div").show('slow',function(){
alert('xxx');
});
});
$("button:last").click(function(){
/*
* hide()方法 - 隐藏
* * hide()无参版本 - 不具有动画效果
* * hide(speed,callback)有参版本 - 具有动画效果
* * speed - 设置动画执行的时长,单位为毫秒
* * 三个预定义值 - slow|normal|fast
* * callback - 当动画执行完毕后的函数
*/
$("div").hide(1000,function(){
alert("yyy");
});
});
//toggle()
function move(){
$("div").toggle(3000,function(){
move();
});
}
move();
二、滑动显示效果
1.slideDown() - 向上滑动
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* slideDown(speed,callback)
2.slideUp() - 向下滑动
* slideUp()
* slideUp(speed,callback)
3.slideToggle() - 向下-向上滑动切换
三、淡入淡出
1.fadeIn() - 淡入
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* fadeIn(speed,callback)
2.fadeOut() - 淡出
* 可以不传递参数 - 底层具有默认时长
* 执行的效果依然具有动画效果
* fadeOut(speed,callback)
3.fadeTo() -
/*
* fadeTo(speed,opacity,callback)
* * speed - 设置动画执行的时长,单位为毫秒
* * opacity - 设置当前元素的透明度(0-1)
* * 0 - 透明
* * 1 - 不透明
*/
$("div").fadeTo(3000,0.5);
四、自定义动画
1.animate(params,[duration],[easing],[callback])
2.animate(params,options)
示例：
// 并发与排队效果
// 并发效果 - 多个动画效果同时执行
// 排队效果 - 多个动画效果按照先后顺序执行
<style>
div {
width : 200px;
height : 200px;
border : solid 1px black;
background : pink;
position : relative;
top : 50px;
left : 10px;
}
</style>
</head> <body>
<button>执行动画</button>
<br><br>
<div></div>
$("button").click(function(){
/*
* animate(params,duration,easing,callback)
* * params - 设置动画执行的样式(CSS的属性)
* * 写法 - { attrName : attrValue}
* * duration - 设置动画执行的时长,单位为毫秒
* * 三种预定义值 - slow|normal|fast
* * easing - 要使用的擦除效果的名称(不使用)
* * callback - 当动画执行完毕后的函数
*/
// 并发效果 - 同时执行
$("div").animate({
"width" : 50,
"height" : 50
},3000);
// 排队效果 - 按照先后顺序执行
$("div").animate({
"width" : 50,
"opacity" : "0.4"
},3000).animate({
"height" : 50
},3000).animate({
"left" : 200
},3000).animate({
"top" : 200,
"opacity" : "1"
},3000);
});
//
$("button").click(function(){
/*
* animate(params,options)
* * params - 设置动画的样式(CSS属性)
* * 写法 - {attrName:attrValue}
* * options - 选项
* * 写法 - {name:value}
* * 选项
* * duration - 设置动画执行的时长
* * easing - 要使用的擦除效果的名称
* * complete - 动画执行完毕后的函数
* * queue - 设定为false将使此动画不进入动画队列
*/
$("div").animate({
"width" : 50
},{
"duration" : 3000
}).animate({
"height" : 50
},{
"duration" : 3000,
"queue" : false
});
});
jQuery基本动画的更多相关文章
- jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
- jQuery的动画处理总结
最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...
- jQuery实现动画过程中尽量避免出现网页滚动条
jQuery实现动画过程中尽量避免出现网页滚动条,不然可能会出现动画效果异常.
- jQuery Easing动画效果扩展（转）
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining
一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...
- 精选7款绚丽的HTML5和jQuery图片动画特效
在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...
- jQuery之动画效果show()......animate()
jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...
- jQuery 停止动画
jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...
- 放弃使用jQuery实现动画
在Web开发的圈子里,开发人员经常觉得CSS动画是一种高性能web动画技术.假设想让网页载入的更快一些,就应该用纯CSS动画.事实上这样的观点是错误的,非常多开发人员早就放弃了javascript的动 ...
- jQuery Easing 动画效果扩展
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
随机推荐
- 软件工程-东北师大站-第二次作业psp
1.本周PSP 2.本周进度条 3.本周累计进度图 代码累计折线图 博文字数累计折线图 本周PSP饼状图
- oracle数据库之存储函数和过程
一.引言 ORACLE 提供可以把 PL/SQL 程序存储在数据库中,并可以在任何地方来运行它.这样就叫存储过程或函数.过程和函数统称为 PL/SQL 子程序,他们是被命名的 PL/SQL 块 ...
- iOS开发GCD的简单使用
- (void)viewDidLoad { [super viewDidLoad]; // gcd 可以充分调用设备的 cpu 发挥最大性能,在 C 语言基础之上封装的 // dispatch_que ...
- ZOJ 1711 H-Sum It Up
https://vjudge.net/contest/67836#problem/H Given a specified total t and a list of n integers, find ...
- 查看OpenWrt的RAM和FLASH
加入了博客园,这是第一篇博文,不多写了,从以前博客搬东西过来吧. 买来一个OpenWrt的路由器,今天刚到的货,赶快拆开看看是不是替我换了RAM和FLASH的.那么怎么查看它是不是真的有那么大呢? 在 ...
- java获取时间整点工具代码
/**获取上n个小时整点小时时间 * @param date * @return */ public static String getLastHourTime(Date date,int n){ C ...
- Luogu4899 IOI2018狼人（kruskal重构树+主席树）
可以发现询问的即是“由起点开始‘只经过编号大于等于l的点’所形成的连通块”与“由终点开始‘只经过编号小于等于r的点’所形成的连通块”是否有交集.于是建出重构树,就可以知道每个询问的连通情况了.现在要知 ...
- Python 源码剖析（一）【python对象】
处于研究python内存释放问题,在阅读部分python源码,顺便记录下所得.(基于<python源码剖析>(v2.4.1)与 python源码(v2.7.6)) 先列下总结: ...
- hdu 2768 Cat vs. Dog (二分匹配)
Cat vs. Dog Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- [洛谷P3627][APIO2009]抢掠计划
题目大意:给你一张$n(n\leqslant5\times10^5)$个点$m(m\leqslant5\times10^5)$条边的有向图,有点权,给你起点和一些可能的终点.问从起点开始,到任意一个终 ...