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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
php创建无限级树型菜单
2015/11/05 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
js实现点击烟花特效
2020/10/14 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
详解python并发获取snmp信息及性能测试
2017/03/27 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
django的ORM模型的实现原理
2019/03/04 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
高级电工工作职责
2013/11/21 职场文书
财务出纳员岗位职责
2013/11/26 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
班风学风建设方案
2014/05/06 职场文书
导游词之广西漓江
2019/11/02 职场文书