JQuery常用简单动画操作方法回顾与总结


Posted in jQuery onDecember 07, 2019

本文实例讲述了JQuery常用简单动画操作方法。分享给大家供大家参考,具体如下:

jQuery基础动画回顾

.hide() 隐藏动画
.show() 出现动画
.toggle() 切换显示状态
.slideUp()/Down() 下拉/卷起动画
.slideToggle() 下拉卷起切换
.fadeIn()/Out() 淡入/出动画
.fadeToggle() 淡入淡出切换
.fadeTo() 透明度变化到指定透明度,参数为(duration,opacity)
.animate() 控制css动画,参数(properties,option)
.stop() 停止动画的执行

注:

1、可选参数,动画持续时间及结束后的回调函数,持续时间也可以用“slow”/“fast”代替。例如

$("#t").hide(3000,function (){
  alert(“回调函数”);
})
//也可以用JSON格式设置参数
$("#t").hide({
  duration: 3000,
  complete: function() {
    alert(“回调函数”);
  }
})

2、animate中option属性的参数有{duration,easing,step,progress,complete}

  • duration - 设置动画执行的时间
  • easing - 规定要使用的 easing 函数,过渡使用哪种缓动函数,内置的有linear线性变化,swing曲线变化,如果需要其他变化方式需要导入库
  • step:规定每个动画的每一步完成之后要执行的函数
  • progress:每一次动画调用的时候会执行这个回调,就是一个进度的概念
  • complete:动画完成回调
$('#elem').animate({    //在现有高宽上增加100px
 width : "+=100px",
 height : "+=100px"
}, {
 duration: 5000,    //在5秒内执行完成
 specialEasing: {
  width: 'linear',    //线性过渡效果
  height: 'easeOutBounce'
 },
 complete: function() {
  $(this).after('<div>动画执行完毕!</div>');
 }
});

3、stop():只会停止第一个动画,后面的继续

  • stop(true):停止所有动画
  • stop(true ture):停止动画,直接跳到第一个动画的最终状态

更多关于jQuery相关内容还可查看本站专题:《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 #jQuery
jQuery轮播图功能制作方法详解
Dec 03 #jQuery
jQuery实现弹幕特效
Nov 29 #jQuery
jquery实现直播弹幕效果
Nov 28 #jQuery
jQuery实现简单弹幕效果
Nov 28 #jQuery
jQuery实现轮播图效果
Nov 26 #jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 #jQuery
You might like
php随机输出名人名言的代码
2012/10/07 PHP
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
利用python代码写的12306订票代码
2015/12/20 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
最新教师自我评价分享
2013/11/12 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
预备党员的自我评价
2014/03/12 职场文书
保研推荐信
2014/05/09 职场文书
大学毕业生推荐信
2014/07/09 职场文书
动物科学专业求职信
2014/07/27 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
财务稽核岗位职责
2015/04/13 职场文书
暂住证证明
2015/06/19 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL