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 相关文章推荐
JS动态调用方法名示例介绍
Dec 18 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
javascript搜索框效果实现方法
May 14 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
vue 清空input标签 中file的值操作
Jul 21 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
详解redux异步操作实践
2018/08/15 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
Mac 上切换Python多版本
2017/06/17 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
python实现月食效果实例代码
2019/06/18 Python
Django 框架模型操作入门教程
2019/11/05 Python
python反扒机制的5种解决方法
2021/02/06 Python
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
Java基础面试题
2012/11/02 面试题
农村婚礼证婚词
2014/01/10 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
历史学专业求职信
2014/06/19 职场文书
师德师风自查总结
2014/10/14 职场文书
2014年节能工作总结
2014/12/18 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL