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,使用该插件可以实现直线匀速运功.变加速 ...
随机推荐
- java—连连看-实现消除
实现消除 1.Chess.java package Linkup; /** * 棋子封装类 * * @author laixl * */ public class Chess { // 图片的 状态 ...
- 3dContactPointAnnotationTool开发日志（二四）
添加了清空2d接触点的按钮,将输出的2d接触点的单位变成了像素,原点在图像的左下角. 对于obj文件的适配更加多样化了.
- mac mysql连接报错ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
找了半天 又是kill进程,又是改设置文件,又是重启电脑,都不管用 翻到stackoverflow上的解决方案,实施成功: 原文链接:https://stackoverflow.com/questio ...
- sublime text 输入法不跟随光标
1.引子 sublime text 有个BUG,那就是不支持中文的鼠标跟随(和PS类似输入的光标和文字候选框不在一起).如下图: 2.插件 安装IMESupport插件即可插件,这款插件是日本人写的. ...
- 关于设置Visaul Studio 2010 代码编辑界面背景的方法
1.打开代码编辑界面: 2.找到工具--选项: 3.打开选项后选中纯文本--项背景色: 4.点击自定义,找到自己需要的颜色: [注]: “项前景色”即代码的颜色: “项背景色”即背景颜色. 设置好后, ...
- dev_queue_xmit 发生了什么?skb还会在哪里缓存
见 codebox/net/qdisk/xmit.log中保存了一份记录 调用关系 sch_direct_xmit --> dev_hard_start_xmit --> xmit_one ...
- [剑指Offer] 49.把字符串转换成整数
题目描述 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数. 数值为0或者字符串不是一个合法的数值则返回0 [思路]考虑所有特殊情况 1.数字前面有空格,如s=" 12 ...
- 【Python】从1<2<3的语法糖说起
python有一个很有意思的语法糖你可以直接写1<2<3. 这复合我们通常意义上的数学不等式,但对学过C等语言其实是有疑惑的. 我们知道不等式返回的其实是个Bool值,在C中是1,0因此C ...
- 【刷题】SPOJ 1811 LCS - Longest Common Substring
A string is finite sequence of characters over a non-empty finite set Σ. In this problem, Σ is the s ...
- [SP8372-TSUM]Triple Sums
题面在这里 description 某\(B\)姓\(OJ\)权限题 给出\(n\)个正整数\(a[i]\),求\(i<j<k\)且\(S=a[i]+a[j]+a[k]\)的三元组\((i ...