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,使用该插件可以实现直线匀速运功.变加速 ...
随机推荐
- C语言特殊符号
-> ->在C语言中称为间接引用运算符,是二目运算符,优先级同成员运算符“.”.用法:p->a,其中p是指向一个结构体的指针,a是这个结构体类型的一个成员.表达式p->a引用了 ...
- Spring学习（三）—— 自动装配案例分析
Spring_Autowiring collaborators 在Spring3.2.2中自动装配类型,分别为:no(default)(不采用自动装配).byName,byType,construct ...
- LintCode-4.丑数 II
丑数 II 设计一个算法,找出只含素因子2,3,5 的第 n 大的数. 符合条件的数如:1, 2, 3, 4, 5, 6, 8, 9, 10, 12... 注意事项 我们可以认为1也是一个丑数 样例 ...
- HDU 1995 R-汉诺塔V
https://vjudge.net/contest/67836#problem/R 用1,2,...,n表示n个盘子,称为1号盘,2号盘,....号数大盘子就大.经典的汉诺塔问 题经常作为一个递归的 ...
- Node js路由
/* 要为程序提供请求的 URL 和其他需要的 GET 及 POST 参数,随后程序需要根据这些数据来执行相应的代码. 因此,需要查看 HTTP 请求,从中提取出请求的 URL 以及 GET/POST ...
- 安全的API接口解决方案
在各种手机APP泛滥的现在,背后都有同样泛滥的API接口在支撑,其中鱼龙混杂,直接裸奔的WEB API大量存在,安全性令人堪优 在以前WEB API概念没有很普及的时候,都采用自已定义的接口和结构,对 ...
- AndroidStudio3.0 注解报错Annotation processors must be explicitly declared now. The following dependencies on the compile classpath are found to contain annotation processor.
把Androidstudio2.2的项目放到3.0里面去了,然后开始报错了. 体验最新版AndroidStudio3.0 Canary 8的时候,发现之前项目的butter knife报错,用到注解的 ...
- 第45天：2017webstrom下载破解汉化
1.webstrom 11.0.3下载地址1:http://pan.baidu.com/s/1kVQjcwf 密码:uggr 下载地址2:http://pan.baidu.com/s/1kVQjcwf ...
- 【Asp.Net Core】ASP.NET Core 2.0 + EF6 + Linux +MySql混搭
好消息!特好消息!同时使用ASP.NET Core 2.0和.NET Framework类库还能运行在linux上的方法来啦! 是的,你没有看错!ASP.NET Core 2.0,.NET Frame ...
- BZOJ4735 你的生命已如风中残烛（组合数学）
将每个位置上的数都-1,则显然相当于前缀和始终非负. 然后就是完全想不到的了.考虑往里面加一张-1的牌.假设在一个合法排列的最后添上一个-1,那么在该排列的所有循环同构排列中,满足前m个前缀和都非负的 ...