jQuery笔记--动画篇
来源:互联网 发布:域名注册使用godaddy 编辑:程序博客网 时间:2024/06/06 11:24
常用动画操作笔记,供今后学习使用。
隐藏显示
隐藏
.hide("fast / slow/n")
‘fast’ 和 ‘slow’ 分别代表200和600毫秒的延时,就是元素会执行200/600毫秒的动画后再隐藏
‘n’表示时间
显示
.show(3000)
隐藏/显示
.toggle(3000)
显示则隐藏,隐藏则显示
$('elem').hide("slow").show(3000)$('elem').toggle(3000)
上卷下拉
下拉动画
.slideDown( [duration ] [, complete ] )
上卷动画
.slideUp( [duration ] [, easing ] [, complete ] )
上卷下拉切换
slideToggle(fast/slow/n)
//下拉$("ele").slideDown(1000, function() { //等待动画执行1秒后,执行别的动作....});//上卷$("#a2").slideUp(3000,function(){ //等待动画执行3秒后,执行别的动作....})
淡入淡出
淡出
.fadeOut( [duration ], [ complete ] )
淡入
.fadeIn( [duration ], [ complete ] )
淡入淡出切换
.fadeToggle( [duration ] ,[ complete ] )
改变透明度
.fadeTo( duration, opacity ,callback)
opacity为透明度 0~1
animate
.animate( properties ,[ duration ], [ easing ], [ complete ] ).animate( properties, options )
.animate()方法允许我们在任意的数值的CSS属性上创建动画。2种语法使用,几乎差不多了,唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似,除了属性范围做了更多限制。第二个参数开始可以单独传递多个实参也可以合并成一个对象传递了.
border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果.
options参数
duration - 设置动画执行的时间
easing - 规定要使用的 easing 函数,过渡使用哪种缓动函数
step:规定每个动画的每一步完成之后要执行的函数
progress:每一次动画调用的时候会执行这个回调,就是一个进度的概念
complete:动画完成回调
$('#elem').animate({ left: 50, width: '50px' opacity: 'show', fontSize: "10em",}, 500);$('#elem').animate({ width: 'toggle', height: 'toggle' }, { duration: 5000, specialEasing: { width: 'linear', height: 'easeOutBounce' }, complete: function() { $(this).after('<div>Animation complete.</div>'); } });
停止动画
.stop( [clearQueue ], [ jumpToEnd ] ).stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )
.stop(); 停止当前动画,点击在暂停处继续开始
.stop(true); 如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
.stop(true,true); 当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值
stop():只会停止第一个动画,第二个第三个继续stop(true):停止第一个、第二个和第三个动画stop(true ture):停止动画,直接跳到第一个动画的最终状态
- jQuery笔记--动画篇
- jQuery动画效果笔记
- jQuery笔记(动画)
- JQuery笔记13:JQuery动画
- jQuery学习笔记之jQuery动画效果
- jQuery整理笔记六----jQuery动画
- jQuery整理笔记六----jQuery动画
- jQuery整理笔记六----jQuery动画
- JQuery学习笔记-JQuery的动画效果
- jQuery基础-动画篇
- jQuery 动画篇
- jQuery--动画篇
- jQuery--动画篇(二)
- JQuery笔记(四)-动画和特效
- Jquery学习笔记——动画
- 学习笔记——jQuery自定义动画
- jQuery 学习笔记之 动画与特效
- jQuery学习笔记之十一------动画效果
- Nodejs创建https服务器(Windows 7)
- Codevs1155 金明的预算方案 ——2006年NOIP全国联赛提高组 变种经典背包dp
- HOG 学习
- 自定义Editext控制输入字数限制的文本框Editext
- boosting和adaboost区别
- jQuery笔记--动画篇
- 设计模式六大原则 - (4):接口隔离原则
- Android二維碼掃描
- spring mvc 通过bean获取form的参数和并且进行服务器验证 ,而且支持多个文件上传的用法。html使用form_data
- Struts2为什么无法找到action啊?eclipse和myeclipse不一样吗?
- zabbix trigger表达式
- 对数组的键名进行排序
- Android Listview 性能优化
- Fuel 9.0安装的Openstack Controller节点进程整理