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输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jquery中each循环的简单回滚操作
May 05 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 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输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
python中的函数用法入门教程
2014/09/02 Python
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
Python+django实现文件下载
2016/01/17 Python
深入浅析python继承问题
2016/05/29 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
如何用python处理excel表格
2020/06/09 Python
python3中编码获取网页的实例方法
2020/11/16 Python
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
火车来了教学反思
2014/02/11 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
活动宣传稿范文
2015/07/23 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL