详解jQuery中基本的动画方法


Posted in Javascript onDecember 14, 2016

大致介绍

通过jQuery中基本的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验

jQuery中的动画

详解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').fadeTo(600,0.5);
 });

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript里的条件判断
Feb 27 Javascript
动态调用CSS文件的JS代码
Jul 29 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
详解vue高级特性
Jun 09 Javascript
浅析上传头像示例及其注意事项
Dec 14 #Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 #Javascript
jQuery 常见小例汇总
Dec 14 #Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 #Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 #Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 #Javascript
实例解析angularjs的filter过滤器
Dec 14 #Javascript
You might like
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
php实现的双色球算法示例
2017/06/20 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
python中的多线程实例教程
2014/08/27 Python
快速查询Python文档方法分享
2017/12/27 Python
使用tensorflow实现线性回归
2018/09/08 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
Python flask框架端口失效解决方案
2020/06/04 Python
详解python polyscope库的安装和例程
2020/11/13 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
大学生职业生涯规划书范文
2014/01/04 职场文书
培训演讲稿范文
2014/01/12 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
python中的被动信息搜集
2021/04/29 Python
我去timi了,一起去timi是什么意思?
2022/04/13 杂记