画效果也是jQuery库吸引人的地方，通过jQuery的动画方法，能够轻松地为网页添加非常精彩的视觉效果，给用户一种全新的体验。

基础

• show()方法和hide()方法

show()方法和hide()方法是jQuery中最基本的动画方法，在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。

$("element").hide();

这段代码的功能与用css()方法设置display属性效果相同：

$("element").css("display", "none");

当把元素隐藏后，可以使用show()方法将元素的display样式设置为先前的显示状态。

• toggle()方法

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

无论是show()方法还是hide()方法亦或是toggle()方法，它们都可以接收用于控制动画耗时的入参，入参的默认单位为毫秒，当然，jQuery也定义了三个内置的速度字符串参数，"slow"、"normal"、"fast"，当我们将耗时参数设置长一点会发现，这三个方法调整的是对应元素的宽、高和不透明度，通过下面的动画查看：

滑动

• slideDown()方法和slideUp()方法

slideUp()方法和slideDown()方法只会改变元素的高度，如果一个元素的display属性设置为“none”，当调用slideDown()方法时，这个元素会由上至下延伸显示，slideUp()方法正好相反，元素将由下至上缩短隐藏。

• slideToggle()方法

滑动轮询切换。

淡入淡出

• fadeIn()和fadeOut()方法

于show()方法不同的是，fadeIn()方法和fadeOut()方法只改变元素的不透明度，fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失(“display:none”)，fadeIn()方法则相反。

• fadeTo([[speed], opacity, [easing], [fn]])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

• fadeToggle()

通过不透明度的变化来循环开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

这些动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

自定义

• animate(params, [speed], [easing], [fn])

用于创建自定义动画的函数，这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。

注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left。

而每个属性的值表示这个样式属性在动画结束时的值，如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "<em>+=</em>" 或 "<em>-=</em>" 来让元素做相对运动。

jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".

params:一组包含作为动画属性和终值的样式属性和及其值的集合。

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)。

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"。

fn:在动画完成时执行的函数，每个元素执行一次。

$("#animate").click(function(e) {
    $test.animate({
      width: "500px",
      height: "400px",
      fontSize: "4em"
    }, 2000);
  });

若感觉对您有用，可以关注并转发，您的关注是对我莫大的支持！

关注并转发后私信“jQuery基础材料”获取线下资料，包括完整基础资料、chm文档、示例代码及其他参考资料。

上一节：jQuery基础回顾——事件冒泡、移除事件、模拟事件

下一节：jQuery基础回顾——jQuery与Ajax应用

绍

AOS是一个用在网页滚动中的动画库，顾名思义，AOS是随着滚动条而伴随的网页动画效果，AOS非常有效的使某些长网页更加的生动和丰富，对于提升网页整体质量具备了促进作用。

Github

14.9k stars，可见使用的人还是非常多的

https://github.com/michalsnik/aos

使用方式

下载好相应的js和css文件

 <link rel="stylesheet" href="./dist/aos.css" />

 <script src="./dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

或者使用包管理工具

• yarn add aos@next
• or npm install --save aos@next

import AOS from 'aos';
import 'aos/dist/aos.css'; 

AOS.init();

• 具体使用

最简单的就是

AOS.init();

或者也可以自行配置一些选项

AOS.init({
  // 全局配置：
  disable: false, // 接受以下值：“phone”、“tablet”、“mobile”、boolean、expression或function
  startEvent: 'DOMContentLoaded', // 在document上调度的事件的名称，AOS应在该事件上初始化
  initClassName: 'aos-init', // 初始化后应用的class
  animatedClassName: 'aos-animate', // 动画类名称
  useClassNames: false, //如果为true，将在滚动时将“data aos”的内容添加为类
  disableMutationObserver: false, // 禁用自动突变检测（高级）
  debounceDelay: 50, // 调整窗口大小时使用的解除抖动延迟（高级）
  throttleDelay: 99, // 滚动页面时使用的节流延迟（高级）
  

  // 可以按每个元素重写的设置，按`data aos-*`属性：
  offset: 120, // 从原始触发点偏移（px）
  delay: 0, // 值从0到3000，步长为50ms
  duration: 400, // 值从0到3000，步长为50ms
  easing: 'ease', // AOS动画的默认缓和
  once: false, // 动画是否只应发生一次（向下滚动时）
  mirror: false, // 当元素滚动过去时是否应该动画化
  anchorPlacement: 'top-bottom', //定义元素相对于窗口的哪个位置应触发动画

});

使用data-aos属性设置动画：

  <div data-aos="fade-in"></div>

并使用data-aos-*属性调整行为：

<div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

动画效果如下：

动图演示

几天用vue配合wow为客户做了双语单页缓冲动画网页……

动画

1、安装wow.js依赖，

npm install wowjs --save;

2、在main.js文件中引入动画css，

import './assets/css/animate.css';

3、在入口app.vue文件中引用。

import WOW from 'wow.js' ;

mounted() {

const wow=new WOW({

boxClass: 'wow', // animated element css class (default is wow)

animateClass: 'animated', // animation css class (default is animated)

offset: 0, // distance to the element when triggering the animation (default is 0)

mobile: true, // trigger animations on mobile devices (default is true)

live: true, // act on asynchronously loaded content (default is true)

scrollContainer: null, // optional scroll container selector, otherwise use window,

resetAnimation: true, // reset animation on end (default is true)

});

wow.init();

},

4、代码中使用：

<div class="wow fadeInUp animated" data-wow-duration="1.3s">内容</div>

双语

1、安装vuei18n依赖，

npm install vue-i18n@next

2、新建lang文件夹，并在里边分别新建ch.js，en.js，index.js文件用来配置中英文内容和入口index文件；

3、在main.js文件中引用，

import VueI18n from "./lang/index.js"

3、在页面中使用

import { useI18n } from 'vue-i18n';

{{ $t('baige.top.year') }}