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之动画与特效相关推荐
- HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效
这是一款jQuery带动画特效的圆形导航菜单特效.该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷. 使用方法 在页面中引入jquery和TweenMax.js的 ...
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
- jquery粒子动画鼠标视差js特效
下载地址 jquery粒子动画鼠标视差特效,很酷的粒子连线动画特效,鼠标移动的时候会有视差特效. dd:
- 4款基于jquery的列表图标动画切换特效
网页中列表图标随处可见,特别是移动网页上,基本上的导航都采用了列表图标.今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效.喜欢的网友赶紧收藏吧. 在线预览 源码下载 实现的代码 ...
- Lazy Line Painter – 很有趣的 jQuery 路径动画插件
Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...
- 【完成发布】Lazy Line Painter – 非常有趣的 jQuery 路径动画插件
Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...
- html5 jquery 效果,精挑整理 8款HTML5/jQuery应用,高端大气上档次特效
项目目录: HTML5/CSS3时尚的圆盘时钟动画 带当前日期 我们可以利用HTML5和CSS3来实现一些钟表动画特效,效果都还不错.今天我们要分享一款利用HTML5和CSS3的圆盘时钟动画,时钟外观 ...
- 7个不容错过的jQuery图片动画及源码
jQuery处理图片的例子特别多,因为图片动画特效可以让网页更加生动,当然,随着CSS3的的加入,jQuery在处理图片方面更为优秀,出来的效果也更加迷人.本文要分享一些基于jQuery的图片动画效果 ...
- html5图片动画源码,不容错过的jQuery图片动画及源码
本文作者html5tricks,转载请注明出处 jQuery处理图片的例子特别多,因为图片动画特效可以让网页更加生动,当然,随着CSS3的的加入,jQuery在处理图片方面更为优秀,出来的效果也更加迷 ...
最新文章
- 12C OCP IZO-62 题库(8月以前)
- RHEL6.3配置Apache服务器(4) 基于用户的访问控制
- div 设置 hover时边框颜色_CSS 奇思妙想边框动画
- Vue、React 之间如何实现代码移植?
- Script Lab 续:为 Officejs 开发配置 VSCode 环境
- 如何使用Webpack在HTML,CSS和JavaScript之间共享变量
- 如何发布.Net MVC 网站项目(攻略集锦)
- python与golang_Golang与python线程详解及简单实例
- 视频会议专线部署不会?别急,我教你
- 开源代码motion
- uniapp引入阿里巴巴矢量图标库
- 四、字符串(7):重复的子字符串
- 《浮图秀》如何优雅查看B站视频封面大图?
- 单招计算机专业的自我介绍,单招面试三分钟自我介绍范文
- 电脑配置低android模拟器,安卓模拟器低配置版哪个好 电脑内存再小也不怕
- MySQL ('root'@'%') does not exist的问题
- *.axf: Error: L6218E: Undefined symbol xxx(xxx.o)问题解决与inline函数的声明
- 支持右翼教科书的日本企业与个人全部名单
- 微软抄袭 AppGet 始末,开源普法任重道远
- Linux svn checkout命令使用示例
热门文章
- 十.控制文件指针移动,文本的修改
- ue4 如何让android与pc通讯,android端只显示umg,如何隐藏android的人物
- 串口服务器控制协议,记录有人物联网USR-W610串口服务器及WEB控制接线图
- 祝贺淘系技术研究合作者北大谢涛教授获2021年度ACM SIGSOFT杰出服务奖
- deepin linux清理软件包
- 如何通过鼠标采集图片数据集
- 【Python】Mac环境下爬取国内Android应用市场指定应用下载量
- 渲染静态页面、get请求、post请求、express框架、路由、中间件
- 虚拟机网络图标不见了
- python 的与众不同 -- 网络篇(二、网络请求/urllib)