php动画,(轻松学PHP-JS篇)jQuery学习-动画
PHP自学与交流中心QQ群:435916459
jQuery中的动画
show()和hide()方法
1、show()方法和hide()方法是jQuery中最基本的方法,hide()方法会将一个元素的display设置为"none";
2、show()方法和hide()方法会同时改变元素的宽度、高度和透明度
3、在一个元素使用hide()方法时会记录原先的display属性,当调用show()方法的时候会根据hide()方法记住的display属性值来显示该元素
4、show()方法和hide()方法都能接受一个参数,表示运动的快慢
$('.div1').toggle(function(){ $('.div2').hide(600);
},function(){
$('.div2').show(600);
});
fadeIn()方法和fadeOut()方法
1、fadeOut()方法在指定的一段时间内只降低元素的不透明度,而fadeIn()方法则相反
2、接受一个参数
$('.div1').toggle(function(){
$('.div2').fadeIn(600);
},function(){
$('.div2').fadeOut(600);
});
slideUp()方法和slideDown()方法
1、slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的display属性值为"none",当调用slideDown()方法时,这个元素将由上至下延伸,slideUp()方法相反
2、接受一个参数
$('.div1').toggle(function(){
$(this).next().slideUp();
},function(){
$(this).next().slideDown();
});
自定义动画方法animate()
语法:animate(params,speed,callback);
(1)params:一个包含样式属性及值得映射
(2)speed:速度参数,可选
(3)callback:在动画完成时执行的函数,可选
1、基本用法
$('.div1').click(function(){
$('.div2').animate(
{width:' =50px',height:'300px'},600);
});
2、多重动画
如果要采用链式运动可以采用链式写法
$('.div1').click(function(){
$('.div2').animate({width:'350px'},600)
.animate({height:'300px'},600);
});
注意:如果采用链式写法时用了css()方法,css()方法不会添加到运动队列中,会直接执行而不等待前面的动画
$('.div1').click(function(){
$('.div2').animate({width:'350px'},600)
.animate({height:'300px'},600)
.css('border','10px solid black');
});
这个元素的边框会在一开始就添加到了元素上,要解决这个问题的办法就是使用回调函数
如果要同时运动可将要运动的值写在一起
$('.div1').click(function(){
$('.div2').animate(
{width:'350px',height:'300px'},600);
});
回调函数
回调函数适用与jQuery所有的动画效果方法
例如要解决链式写法css()属性会直接执行的问题可以采用回调函数的方法
$('.div1').click(function(){
$('.div2').animate({width:'350px'},600)
.animate({height:'300px'},600,function(){
$('.div2').css('border','10px solid black');
});
});
停止动画和判断是否处于动画状态
1、停止元素的动画
stop()方法接受两个参数
第一个参数为true或者false,表示是否要清空为执行完的动画队列,例如我们写链式动画时,如果第一个参数为true,当我们阻止了正在进行的一个动画操作后,后面的动画操作都会被清空,如果参数为false时,就只会阻止当前的这个动画,动画队列后的动画依旧执行
第二个参数为true或者false,表示是否要将正在执行的动画跳转到末状态
2、判断元素是否处于动画状态
如果用户频繁的执行一个animate()动画时,就会出现动画积累,解决方法就是判断元素是否正处于动画状态,如果元素不处于动画状态,才为元素添加新的动画
if(!$('div1').is(':animated')){//添加动画}
3、延迟动画
如果要延迟执行一个动画,就可以使用delay()方法
$('.div1').click(function(){
$('.div2').animate({width:'350px'},600)
.delay(1000) .animate({height:'300px'},600,function(){
$('.div2').css('border','10px solid black');
});
});
其他动画方法
1、slideToggle()方法
通过高度的变化来切换匹配的元素的可见性
$('.div1').click(function(){
$('.div2').slideToggle();
});
2、fadeTo()方法
可以把元素的不透明度以渐进的方式调整到指定的值,这个动画只调整元素的不透明度
$('.div1').click(function(){
$('.div2').fadeTo(600,0.5);
});
3、fadeToggle()方法
通过不透明度来切换匹配元素的可见性
$('.div1').click(function(){
$('.div2').fadeToggle(1000);
});
本文转载于微信公众号: 轻松学PHP(LDAN0313),更多微信文章请扫描关注公众号:
Tag标签:
php动画,(轻松学PHP-JS篇)jQuery学习-动画相关推荐
- 重生之我要学前端—JS篇(一)
重生之我要学前端-JS篇(一) 什么是JS?它的作用是什么?它能帮助我们实现什么?那么今天我们就来揭开JS神秘的面纱! 文章目录 重生之我要学前端-JS篇(一) 前言 JS的简介 第一个JS代码 Ja ...
- html5图片动画源码,不容错过的jQuery图片动画及源码
本文作者html5tricks,转载请注明出处 jQuery处理图片的例子特别多,因为图片动画特效可以让网页更加生动,当然,随着CSS3的的加入,jQuery在处理图片方面更为优秀,出来的效果也更加迷 ...
- [HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
文章目录 前言 HTML HTML 知识整理与补充 CSS CSS 知识整理与补充 JS ES6 JS Web API JQuery JS 知识整理与补充 前言 根据视频和PPT整理 视频及对应资料: ...
- 第二十二篇 jQuery 学习4 内容和属性
jQuery 内容和属性 这节课,我们学习使用jQuery来控制元素的内容.值和属性. html() 控制所选元素的内容(包括HTML标记): text() 控制所选元素的内容: val() 控制 ...
- 轻松学Java基础篇 小白必备!
废话不多说,下面是小编为大家整理的Java在基础阶段的知识点路线图: 是不是看着这么多内容被吓到啦~别怕!继续往下看,经过小编的详细讲解,聪明的你肯定能学会~ 相信这里有很多学习java的朋友,小编整 ...
- html动画用css还是js,javascript与css3动画结合使用小结
当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画.因为在桌面浏览器上, 并非所有的都支持css3.用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养.总有不少人会觉 ...
- android手势控制动画,轻松实现Android,iOS的一个手势动画效果
先来看效果 这是iOS下的效果,android下完全一致.通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过 ...
- JS与Jquery学习笔记(一)
一. Javascript的作用域,大坑! 1. JS作用域奇怪表现之一:预编译 在其他的语言里我们如果使用一个变量在声明其之前,是会报错的,但是在js里面却不一定,比如: 1 function f1 ...
- Js、jquery学习笔记
end() 方法 重新定位到上次操作的元素,一般与siblings()一起使用,操作其兄弟元素.如:$(this).addClass("highlight").children(& ...
最新文章
- linux6用户t密码,linux系统 用户和组管理类命令的使用方法
- 转载 HTTPS 之fiddler抓包、jmeter请求
- Java会话技术之 —— cookie与session
- 【干货】后疫情时代,那些迎来爆发机会的产业.pdf(附下载链接)
- C#仿QQ皮肤—更新DataGridView的鼠标跟随效果
- 1050. 螺旋矩阵(25)-PAT乙级真题
- 静态代码块与构造函数的作用
- 直播技术原理:CDN技术详解
- 常用嵌套sql语句查询
- OTP一次性动态密码工具实现
- wfp 禁用ip_WFP网络过滤驱动——限制网站访问
- 瑞吉外卖项目的购物车sub操作
- 懂球帝Android客户端WebView优化之路
- mapping 映射的简单操作
- 平均年薪50.8万,数据人拿下这个证书有多香?!
- javaEE开发如何在oracle官网下载安装jdk?(java SE 8u5 JDK 和 Java EE 7 SDK with JDK 7 U45的区别 )
- 部落战争手游源码( 服务端+客户端+资源+开发文档)
- dod刷服务器文件,编辑修改
- html5会员管理,如何搭建会员管理体系?
- 时空穿梭 探寻高端存储架构的前世今生
热门文章
- Cocoa 框架 For iOS(二)对象的分配初始化、内省、单例
- VC 2.5 与 ESX 3.0.1 之间存在接口问题
- [导入]还原精灵安装失败!
- BCH实用场景增加,Bitwage推出BCH工资单
- 以太坊经典成为第六个加密货币
- JavaScript 把字符串类型转换成日期类型
- Day25 linux shell中的特殊符号与命令
- 对Linux Kernel 4.15的支持的VirtualBox 5.2.8发布
- 产品力挺PHP完爆Java
- html5 手机上传图片