第7章 jQuery动画-【千锋教育】Jquery从入门到实战

第7章 jQuery动画 动画基础 自定义动画 动画高级 动画基础 自定义动画 ☞点击查看本小节知识架构 动画高级 ☞点击查看本小节知识架构 ☞点击查看本小节知识架构 7.2 7.3 7.1 学习目标 了解 掌握 掌握 了解动画相关的高级内容 1 2 掌握基础动画的使用方法 3 掌握自定义动画的使用方法 销售额 掌握知识 理解知识 熟悉知识 3.333333 3.333333 3.333333 众所周知，下拉菜单、图片轮播、浮动广告是一些网站中常见的动画效果。使用动画效果可提升用户体验，提高用户对网页的使用率。然而使用原生JavaScript实现动画是非常复杂的，要考虑到动画的类型、性能、兼容等一系列问题。而jQuery对原生动画进行了二次封装处理，提供了大量动画相关的方法，从而方便了网页中动画特效的实现。本章将带领大家学会使用这些特效功能。 7.1 动画基础 7.1.1 显示/隐藏 返回目录 7.1.2 淡入/谈出 7.1.3 展开/收缩 7.1 动画基础 jQuery专门提供了一些只针对某一种动画的方法，如淡入/淡出、展开/收缩等效果。这些方法让开发动画变得非常简单。 jQuery中的动画实现与CSS3中的动画实现类似，都是利用时间的长短来决定元素运动的快慢。 show()、hide() 前面已经介绍过show()和hide()方法的使用，它们用于元素的显示和隐藏操作。在对元素进行显示或隐藏的时候，也可以添加动画效果。语法为： 7.1.1 显示/隐藏 7.1 动画基础 “持续时间”参数表示运动持续的时间，有两种设置方式，分别为添加数值和添加单词。如果参数选用数值，则该数值为运动时间的毫秒数；如果参数选用单词，则只有fast、normal、slow这三个可选的单词，分别对应毫秒数为 200、400、600。所以 show(400)跟show('normal')的效果是相同的。 show()、hide()的运动形式为元素width（宽度）、height（高度）、opacity（透明度）的变化。show()是从宽度0、高度0、透明度0运动到当前宽度、当前高度、透明度1，hide()则与show()正好相反。演示代码如下所示。 7.1.1 显示/隐藏 7.1 动画基础 toggle() 如果希望对一个元素进行显示和隐藏的切换操作，可以利用一个开关变量控制切换。 代码如下所示。 7.1.1 显示/隐藏 7.1 动画基础 不过这种方式比较复杂，jQuery专门提供了一个toggle方法来实现智能的show()、hide()切换操作，代码如下所示。 7.1.1 显示/隐藏 7.1 动画基础 运行以上代码可以知道，程序会根据元素当前的显示状态自动调用show()或hide()。 fadeIn()和fadeOut() 它们用于元素的淡入和淡出操作。参数表示运动持续的时间，可设置为毫秒数或单词，可选单词与show()方法相同。不写参数时，默认运动持续的时间为400毫秒，所以fadeIn()和fadeIn('normal')、fadeIn(400)是等价的。 fadeIn()、fadeOut()的运动形式为元素opacity（透明度）的变化。fadeIn()是从透明度0运动到透明度1，fadeOut()则与fadeIn()正好相反。其语法为： 7.1.2 淡入/淡出 7.1 动画基础 演示代码如下所示。 7.1.2 淡入/淡出 7.1 动画基础 fadeToggle() jQuery同样提供了一个智能的fadeToggle()方法，它会根据元素当前的显示状态自动调用fadeIn()或fadeOut()，演示代码如下所示。 7.1.2 淡入/淡出 7.1 动画基础 slideDown()、slideUp() 它们用于元素的展开和收缩操作。参数表示运动持续的时间，可设置为毫秒数或单词，可选单词与show()方法相同。不写参数时，默认运动持续的时间为400毫米，所以slideDown()和slideDown('normal')、slideDown(400)是等价的。 slideDown()、slideUp()的运动形式为元素height（高度）的变化。slideDown()是从高度0运动到当前高度，slideUp()则与slideDown()正好相反。其语法为： 7.1.3 展开/收缩 7.1 动画基础 演示代码如下所示。 7.1.3 展开/收缩 7.1 动画基础 slideToggle() jQuery同样提供了一个智能的slideToggle()方法，它会根据元素当前的显示状态自动调用slideDown()或slideUp()，演示代码如下所示。 7.1.3 展开/收缩 7.1 动画基础 7