# 九、效果

## 禁用所有 jQuery 效果方法

只需将`off`属性的值设置为`true`，就可以禁用 jQuery 提供的所有动画方法。

样本:sample92.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <div style="height: 100px; width: 100px; background-color: red; position: absolute;
        left: 20px;">Try to animate
me! </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script> (function($) {      
     jQuery.fx.off = true;     
     $('div').slideUp(); //
Does not animate, hides immediately.  
 })(jQuery); </script>
</body>
</html>

```

当`off`设置为`true`时，所有的效果方法都不会动画化，而是使用 CSS 规则`display:none`和`display:block`立即隐藏和显示。您可以通过传递`off`属性一个`false`值来重新打开动画。

样本:sample93.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <div style="height: 100px; width: 100px; background-color: red; position: absolute;
        left: 20px;">
        Try to animate me!
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script> (function ($) {
     jQuery.fx.off = true;
     $('div').slideUp();
     jQuery.fx.off = false; //
Turn animation back on.

     $('div').slideDown(); // It
will now animate.  
 })(jQuery); </script>
</body>
</html>

```

## 摸索着`stop()`的动画制作方法

在开始另一个动画之前，通常需要停止当前正在进行的动画。例如，当使用自定义`mouseenter`和`mouseleave`事件(或`hover()`方法)时，您可能会无意中触发一个由于先前的`mouseenter`或`mouseleave`事件而已经在动画化的元素。这会导致排队动画的累积，从而导致界面迟缓。要避免这种情况，只需在开始新动画之前使用`stop()`方法停止当前动画。

样本:sample94.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <div style="height: 100px; width: 100px; background-color: red; position: absolute;
        left: 20px;">
        Hover over Me!
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      $('div').hover(function ()
      { $(this).stop().animate({
left: 75 }, 'fast'); },
        function () { $(this).stop().animate({
left: 20 }, 'fast'); });
  })(jQuery); </script>
</body>
</html>

```

从代码中删除`stop()`方法，并将鼠标在元素上滚动几次，以查看鬼影动画的出现。连续滚动页面中的元素将导致动画累积，这通常不是期望的结果。

注释:

此外，通过将 **`stop()`** 方法传递为真的参数，不仅可以停止选择元素队列中的当前动画，还可以停止整个队列。这将有效地停止所有排队的动画，活动的和不活动的。

## 使用`:animated`确定一个元素是否正在制作动画

自定义`:animated`选择器过滤器可用于选择当前正在制作动画的元素。下面，我使用这个自定义的选择器过滤器向一个动画`<div>`元素添加文本。

样本:sample95.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <div style="height: 100px; width: 100px; background-color: red; color: white"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      function
recursiveAnimate()
      { $('div').slideToggle('slow',
recursiveAnimate); };
      recursiveAnimate(); $('div:animated').text('I
am animating');
  })(jQuery); </script>
</body>
</html>

```

## 使用`show()``hide()`和`toggle()`，没有动画

使用带有参数的`show()`、`hide()`和`toggle()`方法将通过更改 CSS 属性(高度、宽度、不透明度、边距、填充)使正在显示或隐藏的元素产生动画效果。只需不传递任何参数，就可以跳过隐藏和显示元素的动画。这将改变这些方法调整元素可见性的方式。通过调整 CSS `display`属性，受影响的元素将简单地出现或消失，没有任何动画。

样本:sample96.html

```js
<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        div
        {
            height: 100px;
            width: 100px;
            background-color: red;
            color: white;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>Click Me (hide
animation)</div>
    <div>Click Me (hide no
animation)</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      // Hide with
animation.     
      $('div:first').click(function () { $(this).hide(1000) });
      // Hide no
animation,     
      $('div:last').click(function () { $(this).hide() });
  })(jQuery); </script>
</body>
</html>

```

注意事项:

jQuery 方法 **`hide()`** 、 **`show()`** 、 **`toggle()`** 、 **`slideUp()`** 、 **`slideDown()`** 、 **`slideToggle()`** 当用于具有 CSS **`display`** 值的元素时， **`inline`** 将在动画持续时间内更改为 **`display:block`** 。

## 探索连续和非连续动画

理解同时发生的动画和随时间按顺序发生的动画之间的区别很重要。默认情况下，当效果方法被链接时，它们会被添加到队列中，并且每个效果会一个接一个地出现。

样本:sample97.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <div style="height: 100px; width: 100px; background-color: red; position: absolute;
        left: 20px; border: 1px solid #ff9933">
        Animate me!
    </div>
    <div style="height: 100px; width: 100px; background-color: red; position: absolute;
        left: 20px; top: 100px; border: 1px solid #ff9933">
        Animate me!
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script> (function ($) {
     // Each effect is added to a
queue and occurs sequentially.     
     $('div:first').slideUp('slow').slideDown('slow').hide('slow');
     // Each method is added to a
queue and occurs sequentially.     
     $('div:last').animate({
width: '200px' }, 1000).animate({ borderLeftWidth: '10px' }, 1000);
 })(jQuery); </script>
</body>
</html>

```

使用`animate()`方法，您可以通过将所有 CSS 属性更改传递给单个`animate()`方法调用，将动画设置为非顺序发生或同时发生。在下面的代码中，`<div>`将同时激活其宽度和边框左宽度。

样本:sample98.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <div style="height: 100px; width: 100px; background-color: red; position: absolute;
        left: 20px; border: 1px solid #ff9933">Animate me! </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script> (function($){      
     // Both width and
borderLeftWidth properties will animate simultaneously.     
     $('div').animate({
width: '200px', borderLeftWidth: '10px' }, 1000);
 })(jQuery); </script>
</body>
</html>

```

## `Animate()`是基础，低级抽象

`animate()`方法是用于构建所有预配置动画的基本方法，例如`hide()`、`slideDown()`。它提供了改变样式属性值的能力。

以下是使用此方法时需要了解的内容。

*   仅支持采用数值的属性。换句话说，你不能设置**`backgroundColor`** 属性的值(至少不能没有 [插件](http://plugins.jquery.com/project/color))。此外，像**`backgroundPosition`** 这样取多个值的属性不能被动画化。
*   如果适用，可以使用 em 和%来制作 CSS 属性的动画。
*   可以使用属性值前面的“+=”或“-=”来指定相对动画。例如，这将使元素相对于其当前位置正向或反向移动。
*   如果指定动画持续时间为 0，动画将立即将元素设置为结束状态。
*   作为一种快捷方式，如果传递了 **`toggle`** 的值，动画将简单地从它所在的位置反转，并动画化到该位置。
*   通过单个 **`animate()`** 方法设置的所有 CSS 属性将同时激活。

## 摸索 jQuery 的褪色方法

使用**`fadeIn()`****`fadeOut()`**和 **`fadeTo()`** 方法时，需要调用三个概念。

与其他效果方法不同，淡入淡出方法仅调整元素的不透明度。当使用这些效果方法时，假设任何被淡化的元素已经有了高度和宽度。

渐变动画将使元素从当前的不透明度中渐变。

使用 **`fadeOut()`** 方法将元素从其当前不透明度渐变，然后一旦 100%渐变，它会将元素的 CSS 显示属性更改为“无”

下面的代码说明了上述每一点。

样本:sample99.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <!-- Elements being
faded should have a width and height -->
    <div style="height: 100px; width: 100px; background-color: red;"></div>
    <button>Fade the rest of
the way</button>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
$('div').fadeTo('slow', 0.50);
      $('button').click(function () {
          // Fade from current
opacity to zero,         
          // and then hide
element via display:none         
          $('div').fadeOut('slow');
      });
  })(jQuery); </script>
</body>
</html>

```