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模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery实现tab栏切换效果
Dec 22 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/07/17 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
js如何验证密码强度
2020/03/18 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
python 获取字符串MD5值方法
2018/05/29 Python
Python字符串的一些操作方法总结
2019/06/10 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
酒店总经理欢迎词
2014/01/15 职场文书
施工安全生产承诺书
2014/05/23 职场文书
销售会议开幕词
2015/01/28 职场文书
团员个人总结
2015/02/26 职场文书
大国崛起观后感
2015/06/02 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js