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实现每日签到功能
Apr 03 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
vue之数据交互实例代码
Jun 16 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
小程序实现多列选择器
Feb 15 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
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从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
python连接数据库的方法
2017/10/19 Python
Python SQLite3简介
2018/02/22 Python
python实现图片识别汽车功能
2018/11/30 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
C语言编程题
2015/03/09 面试题
Python的两道面试题
2013/06/29 面试题
医学专业个人求职自荐信格式
2013/09/23 职场文书
学校卫生检查制度
2014/02/03 职场文书
项目合作意向书范本
2014/04/01 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android