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,使用该插件可以实现直线匀速运功.变加速 ...
随机推荐
- 【Docker 命令】- top命令
docker top :查看容器中运行的进程信息,支持 ps 命令参数. 语法 docker top [OPTIONS] CONTAINER [ps OPTIONS] 容器运行时不一定有/bin/ba ...
- SpringMVC的工作流程-005
1.用户发送请求至前端控制器DispatcherServlet 2.DispatcherServlet收到请求调用HandlerMapping处理器映射器. 3. ...
- Error:Unable to tunnel through proxy. Proxy returns "HTTP/1.1 400 Bad Request"
(1) 网上下载了一个android应用:死活用不了,查了以下,原来是android studio版本不对,于是把android studio的版本从2.2 升级到3.0,后来发现没法升级,只能下载, ...
- javabean 参数收集 设置属性 设置不同级别的域对象的属性 默认存储在pagecontext中
javabean 参数收集 设置属性 设置不同级别的域对象的属性 默认存储在pagecontext中
- hash 默认使用equal进行元素比较 防止元素重复
hash 默认使用equal进行元素比较 防止元素重复
- 【bzoj5089】最大连续子段和 分块+单调栈维护凸包
题目描述 给出一个长度为 n 的序列,要求支持如下两种操作: A l r x :将 [l,r] 区间内的所有数加上 x : Q l r : 询问 [l,r] 区间的最大连续子段和. 其中,一 ...
- 【bzoj1334】[Baltic2008]Elect 背包dp
题目描述 N个政党要组成一个联合内阁,每个党都有自己的席位数. 现在希望你找出一种方案,你选中的党的席位数要大于总数的一半,并且联合内阁的席位数越多越好. 对于一个联合内阁,如果某个政党退出后,其它党 ...
- select模型的原理、优点、缺点
关于I/O多路复用: I/O多路复用(又被称为“事件驱动”),首先要理解的是,操作系统为你提供了一个功能,当你的某个socket可读或者可写的时候,它可以给你一 个通知.这样当配合非阻塞的socket ...
- 【题解】FJOI2015火星商店问题
好几天之前做的题目了,一直想写一下博客也没腾出时间来,今天赶紧把坑给填上呼呼呼~ 这道题首先如果只考虑每个商店中没有时间限制的物品时,我们只需要使用一棵可持久化trie树来维护区间内的异或最大值即可, ...
- [BZOJ2055] 80人环游世世界
Description 想必大家都看过成龙大哥的<80天环游世界>,里面的紧张刺激的打斗场面一定给你留下了深刻的印象.现在就有这么 一个80人的团伙,也想来一次环游世界. 他们 ...