动画

一、隐藏与显示

• show 方法用于显示出隐藏的被选元素。

其语法格式为：

$().show(speed, easing, callback);

• hide 方法用于隐藏被选元素。

$().hide(speed, easing, callback);

注意

show() 只适用于通过 jQuery 方法和 CSS 中 display 属性隐藏的元素，不适用于通过 visibility 隐藏的元素。

show 和 hide 方法的参数说明

• speed 可选参数，用于设置显示的速度，其值可以是以毫秒为单位的数值，也可以是 slow、normal、fast 等值。
• easing 可选参数，用于设置动画在不同点上元素的速度，其默认值是 swing，表示开头和结尾的速度慢，中间的速度快。
• callback 可选参数，是方法执行完成后，执行的一个函数。

提示

• 上面代码中，我们让四个 div 元素左浮动显示在同一行，使用 mouseover 和 hide 方法实现，当鼠标放在元素上，该元素立马隐藏起来。
• 使用 mouseout 和 show 方法实现，当鼠标移出元素，该元素又马上显示出来了。

可以给 hide 和 show 方法分别添加一个时间参数来看看代码执行的效果。

$(function () {
  $("div")
    .mouseover(function () {
      $(this).hide(3000);
    })
    .mouseout(function () {
      $(this).show(3000);
    });
});

二、淡入与淡出

• fadeIn 方法可以让元素淡入，它逐渐改变元素的不透明度，让不透明度从 0 逐渐变为 1，从而实现淡入的效果。
• fadeOut 则用于让元素淡出，也是通过修改元素的不透明度，让不透明度逐渐从 1 变为 0，从而实现淡出的效果。

其语法格式为：

// 淡入
$().fadeIn(speed, easing, callback);

// 淡出
$().fadeOut(speed, easing, callback);

参数说明可以参考一、隐藏与显示

提示

• 上面代码中，在 body 标签中写入三个颜色不同的 div 元素，使用 fadeOut 方法实现当鼠标放在元素上，该元素的背景颜色会逐渐变淡直到消失。
• 使用 fadeIn 方法实现当鼠标移出元素，背景颜色慢慢变深知道恢复原状。

三、自定义动画

在 jQuery 中，使用 animate 方法可以实现自定义动画。

其语法格式为：

$().animate({ style }, speed, callback);

style 是样式属性列表，我们的样式属性列表用逗号隔开写在 {} 中，speed 是动画持续的时间，callback 是动画结束后所执行的函数。

警告

默认情况下，所有 HTML 元素的定位方式都是静态定位（即 position: static），且无法移动。 如需对位置进行操作，比如使用 “top”，“right”，“bottom”，“left” 属性要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

提示

在上面代码中，我们给页面里的两个按钮分别绑定了点击事件，在第一个点击事件里，给 div 元素添加了左移的动画效果，left:"+=100px" 相当于 left = left + 100px。在第二个点击事件里，给 div 元素添加了改变宽度的动画效果。

四、队列动画

队列动画:让动画按照一定的顺序去执行多个动画效果

队列动画其语法格式为：

$().animate().animate()....animate();

由于 jQuery 不支持变色，为了弥补这一缺陷，给 jQuery 的动画赋予变色的能力，我们需要导入一个颜色库jquery.color。

提示

可以看出队列动画的作用在于让每个动画效果有执行的先后顺序，就像排队一样。若是在一个 animate 方法中写多个属性，动画效果会同时出现，并无先后顺序。

五、回调函数

回调函数的格式如下：

$().animate({ style }, speed, callback);

animate 函数的第三个参数是代表动画执行完毕以后的回调函数

程序是想实现在动画的最后修改 p 元素的背景颜色为黄色，但是运行发现一开始就修改了 p 元素的背景颜色。

原因是 css 方法属于非动画方法，非动画方法不会加入到动画队列中，而是立即执行。该如何解决呢？

可以使用回调函数让非动画方法实现排队。

修改上述代码，在最后一个动画中加入回调函数并把修改背景颜色的代码放入到回调函数中。代码如下：

//... 省略其他代码
$(function () {
  $(".btn1").click(function () {
    $("#title")
      .animate({ letterSpacing: "5px" }, 1000)
      .animate({ fontSize: "25px" }, 1000, function () {
        $("#title").css({ "background-color": "yellow" });
      });
  });
});

这样我们就使用回调函数解决了非动画方法 css 方法不会加入到动画队列的问题。

六、停止动画

stop 方法的语法格式为：

$().stop(stopAll, goToEnd);

参数说明

• 第一个参数 stopAll 代表是否停止所有动画，其取值为 true 或者 false，当为 true 时代表停止当前及后面的所有动画，当为 false 时代表只停止当前动画。
• 第二个参数 goToEnd 代表停止动画后是否跳转到最后的动画效果，其取值也是布尔类型，当为 true 时，代表停止动画后会跳转到最后的动画效果，为 false 时则不跳转。
• stop 方法的两个默认参数取值为 false，也就是当你写 stop() 时，相当于只停止当前动画并且不会跳转到动画的最后效果。

提示

在我们的代码中给 div 元素设置了三个不同的动画效果，当执行第二个变宽的动画效果时，我们触发了 stop 方法，所以第二个动画效果停止，继续执行第三个动画效果。

七、延迟动画

在 jQuery 中我们可以使用 delay 方法来延迟动画的执行，比如，当我们打开页面并不想让动画立马执行，可以在 animate 前面加上延迟方法，来延缓动画的开始时间。

其语法格式为：

$().delay(speed);

delay 方法的必要参数 speed 是动画延迟的时间。

提示

从上面的实验效果我们可以看出，当元素的长宽改变后，延迟了 3000 毫秒才执行了背景颜色填充的动画。