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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 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 similar_text 字符串的相似性比较函数
2010/05/26 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
javascript显示动态时间的方法汇总
2018/07/06 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Django日志模块logging的配置详解
2017/02/14 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
python GUI模拟实现计算器
2020/06/22 Python
python中K-means算法基础知识点
2021/01/25 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
经管应届生求职信
2013/11/17 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
python入门学习关于for else的特殊特性讲解
2021/11/20 Python