详解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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
Javascript变量作用域详解
Dec 06 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
javascript流程控制语句集合
Sep 18 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 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针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
javascript Prototype 对象扩展
2009/05/15 Javascript
js取得url地址参数实例
2013/02/22 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
ES6正则的扩展实例详解
2017/04/25 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
利用Python如何生成随机密码
2016/04/20 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
对python中dict和json的区别详解
2018/12/18 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
团员学习总结的自我评价范文
2013/10/14 职场文书
致百米运动员广播稿
2014/01/29 职场文书
无工作证明怎么写
2015/06/15 职场文书
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python