JQuery动画与特效实例分析


Posted in Javascript onFebruary 02, 2015

本文实例分析了JQuery动画与特效的用法。分享给大家供大家参考。具体分析如下:

显示与隐藏

show(spped,[callback])与hide(spped,[callback])
speed可选填slow、normal、fast,对应的速度分别为600ms、400ms、200ms。也可以直接填毫秒数,callback函数为回调函数,动作完成后调用此函数

$("img").show(3000,function(){ 
   $(this).css("border","solid 1px #ccc”); 
});

toggle()函数,无参格式,在显示和隐藏之间切换
toggle(true orfalse) 带布尔值形式,为true时显示元素,否则,隐藏元素
toggle(speed,[callback])与show()函数用法类似

滑动

slideDown(spped,[callback])与slideUp(spped,[callback])
本质上是改变元素的高度
slideToglge(spped,[callback])切换slide效果

淡入淡出

fadeIn(spped,[callback])与fadeOut(spped,[callback])
本质上是改变元素的透明度
fadeTo(spped,opacity,[callback]);  opacity为透明度,0到1之间,1为全透明

自定义动画

animate(params,[duration],[easing],[callback])
params表示用于制作动画效果的属性样式和值得集合
duration表示三种默认的速度字符,slow、normal、fast或自定义的毫秒数
easing为动画插件使用,用于控制动画的表现效果,通常有linear和swing字符值
callback为动画完毕后,执行的回调函数

$(this).animate( 
   {   width:"20%", 
       height:"70px"    
    }, //对象表示法,JQuery中常用这种格式传递参数 
   3000, 
   function(){ 
   $(this).css("border":"solid 3px #666") 
   .html("变大了!!"); 
   } 
);//传递参数时,必须用骆驼法来写属性名称,如font-size必须写成fontSize
$("p").animate( 
   { left:"20px", 
    top:"70px"  
   }, 
   3000 
) //向右移动20像素,向下移动70像素

stop([clearQueue],[gotoEnd])
clearQueue是一个布尔值,表示是否停止正在执行的动画
gotoEnd是一个布尔值,表示是否立即完成正在执行的动画
delay(duration,[queueName])
duration为延迟的时间值
queueName表示队列名词,即动画队列

$("a :eq(0)").click(function(){ 
   $("img").slideToggle(3000); 
}); //“拉窗帘”方式切换图片 
$("a:eq(1)").click(function(){ 
   $("img").stop(); 
}); //停止正在执行的动画 
$("a:eq(2)").click(function(){ 
   $("img").delay(2000) 
   .slideToggle(3000); 
}); //延时切换图片

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

Javascript 相关文章推荐
jQuery 使用手册(二)
Sep 23 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
Jquery判断$("#id")获取的对象是否存在的方法
Sep 25 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
Javascript核心读书有感之词法结构
Feb 01 #Javascript
Javascript核心读书有感之语言核心
Feb 01 #Javascript
jQuery功能函数详解
Feb 01 #Javascript
jQuery动画与特效详解
Feb 01 #Javascript
jquery制作 随机弹跳的小球特效
Feb 01 #Javascript
jQuery实现单击和鼠标感应事件
Feb 01 #Javascript
jquery制作LED 时钟特效
Feb 01 #Javascript
You might like
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
回调函数的意义以及python实现实例
2017/06/20 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
学院书画协会部门职责
2013/11/28 职场文书
自荐书范文
2013/12/08 职场文书
四年级下册教学反思
2014/02/01 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
把77A收信机改造成收音机
2022/04/05 无线电
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis