jQuery动画效果相关方法实例分析


Posted in Javascript onDecember 31, 2015

本文实例讲述了jQuery动画效果相关方法。分享给大家供大家参考,具体如下:

1、show()显示效果

语法:show(speed,callback)  Number/String,Function speend为动画执行时间,单位为毫秒。也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数。

show(speed,[easing],callback)  Number/String  easing默认是swing,可选linear;

$("#div1").show(3000,function(){ alert("动画显示完成!"); });

2、hide()隐藏效果

语法:hide(speed,callback)  Number/String,Function

hide(speed,easing,callback)  Number/String

$("#div1").hide(3000,function(){ alert("动画隐藏完成") });

3、toggle()隐藏显示自动切换,当目前为显示则隐藏,当目前为隐藏则显示

语法:toggle(speed,callback)  Number/String,Function

toggle(speed,callback)  Number/String,String,Function

$("#div1").toggle(3000,function(){ alert("动画效果切换完成") });

4、slideDown()向下显示,slow()是水平与垂直方向同时展开,而slideDown是仅仅在垂直方向向下展开

语法:slideDown(speed,callback)  Number/String,Function

slideDown(speed,[easing],callback)  Number/String,Function

$("#div1").slideDown(3000,function(){ alert("向下展开显示成功!"); });

5、slideUp()向上隐藏,  hide()是水平与垂直两个方向的,而slideUp()仅仅是垂直方向向上收起隐藏

语法:slideUp(speed,callback)  Number/String,Function

slideUp(speed,[easing],callback)  Number/String,String,Function

$("#div1").slideUp(3000,function(){ alert("向上收起隐藏成功!"); })

6、slideToggle垂直方向上切换,toggle是水平与垂直两个方向上的,而slideToggle是仅仅垂直方向的。

语法:slideToggle(speed,callback)  Number/String,Function

slideToggle(speed,[easing],callback)  Number/String,String,Function

$("#div1").slideToggle(3000,function(){ alert("水平方向上切换成功"); });

7、fadeIn() 以改变透明度来显示

语法:fadeIn(speed,callback)    Number/String,Function

fadeIn(speed,[easing],callback)  Number/String,Function

$("#div1").FadeIn(3000,function(){ alert("淡入显示成功!"); });

8、fadeOut() 以改变透明度来隐藏

语法:fadeOut(speed,callback)     Number/String,Function

fadeOut(speed,[easing],callcack)     Number/String,String,Function

$("#div1").fadeOut(3000,function(){ alert("淡出隐藏成功!"); });

9、fadeToggle() 以改变透明度来切换显示隐藏状态

语法: fadeToggle(speed,callback)  Number/String,Function

fadeToggle(speed,[easing],callback)    Number/String,Function

$("#div1").fadeToggle(3000,function(){ alert("淡入淡出切换成功!"); });

10、fadeTo() 由指定的时间将透明度改变到指定的透明度

语法:fadeTo(speed,callback)    Number/String,Function

fadeTo([speed],opacity,[easing],[fn])  Number/String,Float,String,Function

$("#div1").fadeTo(3000,0.22,function(){ alert("透明度改变成功!"); });

11、animate() 自定义动画,一般来说数字变动都可以用于动画。

语法:animate(params,speed,easing,callback);  样式参数,时间,可选择,函数

$("#div1").animate({ width:300px,height,300px },3000);

其中params要用中括号括起来,可以使用的css样式参数。注意要采用骆驼法则,如font-size要写成fontSize。颜色渐变不支持。

backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent

12、stop() 停止正在执行动画

stop([clearQueue],[gotoEnd]);  两个参数均为布尔值,第一个表示,是否停止动画执行、第二个表示,如果停止,是否立即变为执行完成的状态,如果设置为否,则停留在执行一半的状态。

$("#div1").hide(5000) //此动画正在执行
$("#div1").stop();  //上一行代码指定的动画停止在一半状态
$("#div1").stop(true,true); //停止当前动画,同时动画切换到完成执行状态。

13、delay() 延迟执行动画  当一个动画stop()了之后还能够用delay()来延迟执行。从停止位置继续执行。当然用原来的方法继续执行也不可,不过没有延时效果。

delay(duration,[queueName])  设置一个延迟值来执行动画  Integer,String

$("#div1").delay(3000).hide(3000);  //表示在3000毫秒后执行hide(3000);

14、jQuery.fx.off  //该属性只是是否关闭当前页面上的动画,关闭动画之后,没有动画效果,所有设置了执行时间的动画会瞬间完成。注意此属性出现的位置。出现的位置不同影响的范围也不同
$(function(){
  jQuery.fx.off = true; //属性在事件外面,对页面加载后执行的所有动画有效
  $("#div1").click(function(){ //属性如果写在这里,仅仅对当前点击事件无效,不影响其他事件的动画
   $("#div1").hide(3000); //注意由于jQuery.fx.off设置为了true,因此3000毫秒失效,相当于hide();
   });
})

15、jQuery.fx.interval  //该属性设置动画的帧速,单位是毫秒,如果设置的时间越小,就越平滑。,属性出现的位置同样有影响范围

$(function(){
  jQuery.fx.interval = 1000;
  $("#div1").click(function(){
   $("#div1").hide(3000); //jQuery.fx.interval设置为1000,也就是1秒钟,改变一次效果。
   });
})

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

Javascript 相关文章推荐
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 #Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 #Javascript
jQuery语法小结(超实用)
Dec 31 #Javascript
解决JS无法调用Controller问题的方法
Dec 31 #Javascript
简单谈谈JavaScript的同步与异步
Dec 31 #Javascript
jQuery实现简单的图片查看器
Sep 11 #Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 #Javascript
You might like
php设计模式 Facade(外观模式)
2011/06/26 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
JavaScript 中的 this 简单规则
2017/09/19 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
详细分析Python垃圾回收机制
2020/07/01 Python
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
开办化妆品公司创业计划书
2013/12/26 职场文书
微博营销计划书
2014/01/10 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
文案策划求职信
2014/04/14 职场文书
辞职信怎么写
2015/02/27 职场文书