jQuery之动画效果大全


Posted in Javascript onNovember 09, 2016

下面介绍了几种动画效果的方法,具体如下:

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秒钟,改变一次效果。 



 });


 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 #Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 #Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 #Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 #Javascript
H5移动端图片压缩上传开发流程
Nov 09 #Javascript
微信小程序 网络API Websocket详解
Nov 09 #Javascript
微信小程序 网络API 上传、下载详解
Nov 09 #Javascript
You might like
PHP中操作ini配置文件的方法
2013/04/25 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
python3.6使用pickle序列化class的方法
2018/10/22 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
PyQt5实现简易电子词典
2019/06/25 Python
Python的几种主动结束程序方式
2019/11/22 Python
Python tcp传输代码实例解析
2020/03/18 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
运动会通讯稿50字
2014/01/30 职场文书
小学教师办公室制度
2014/02/03 职场文书
房地产营销策划方案
2014/02/08 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
司法建议书范文
2014/05/13 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书