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,使用该插件可以实现直线匀速运功.变加速 ...
随机推荐
- No Route to Host from master/192.168.2.131 to master:9000 failed on socket t
host里边添加的ip地址与当前的ip地址(ifconfig可以查看)不一致,修改当前ip地址就可以了.
- Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
一. Application用途 1. Application用途 创建Application时机 : Application在启动的时候会调用Application无参的构造方法创建实例; Appl ...
- 往Matlab中添加工具包
使用Matlab过程中,常常会缺少一些函数包导致无法运行,会显示未定义函数. 假如我要用sigshift( ) 这个移位函数,但Matlab中没有,就会提示错误:未定义函数或变量 'sigshift' ...
- <Android>列表、网格、画廊视图及适配器的绑定
列表视图和适配器的绑定 列表视图既可以使用ListView组件,也可以继承ListActivity.显示可以是ArrayAdapter,也可以是游标SimpleCursorAdapter,还可以是继承 ...
- .net 简体转换繁体实例，繁体转换简体 Encode.dll、下载
在项目中先引用Encode.dll 下面是下载地址: Encode.dll ChineseConverter.dll 1.html页面代码 <%@ Page Language="C# ...
- 【Docker 命令】- run命令
docker run :创建一个新的容器并运行一个命令 语法: docker run [OPTIONS] IMAGE [COMMAND] [ARG...] OPTIONS说明: -a stdin: 指 ...
- 全面了解 Nginx 到底能做什么
来源:https://www.jianshu.com/p/8bf73d1a758c 前言 本文只针对Nginx在不加载第三方模块的情况能处理哪些事情,由于第三方模块太多所以也介绍不完,当然本文本身也可 ...
- 【bzoj4195】[Noi2015]程序自动分析 离散化+并查集
题目描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3,…代表程序中出现的变量,给定n个形如xi=xj或xi≠xj的变量 ...
- Codeforces Round #517 Div. 1翻车记
A:真的懵逼了.冷静了半天之后决定二分一下答案,然后先a安排上尽量小的再贪心地一个个扩大.40min才过.这个做法非常怂的以代码复杂度和时间复杂度为代价换取了比较稳的正确性,事实上由于1~n可以组合出 ...
- Luogu1053 NOIP2005篝火晚会
首先造出所要求的得到的环.如果将位置一一对应上,答案就是不在所要求位置的人数.因为显然这是个下界,并且脑补一下能构造出方案达到这个下界. 剩下的问题是找到一种对应方案使错位数最少.可以暴力旋转这个环, ...