Skip to content

Latest commit

 

History

History
261 lines (209 loc) · 9.05 KB

10.md

File metadata and controls

261 lines (209 loc) · 9.05 KB
Raw

九、效果

禁用所有 jQuery 效果方法

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

样本:sample92.html

<!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

<!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

<!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

<!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

<!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

<!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

<!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** 属性的值(至少不能没有 插件)。此外，像**backgroundPosition** 这样取多个值的属性不能被动画化。
  • 如果适用，可以使用 em 和%来制作 CSS 属性的动画。
  • 可以使用属性值前面的“+=”或“-=”来指定相对动画。例如，这将使元素相对于其当前位置正向或反向移动。
  • 如果指定动画持续时间为 0，动画将立即将元素设置为结束状态。
  • 作为一种快捷方式，如果传递了 toggle 的值，动画将简单地从它所在的位置反转，并动画化到该位置。
  • 通过单个 animate() 方法设置的所有 CSS 属性将同时激活。

摸索 jQuery 的褪色方法

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

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

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

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

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

样本:sample99.html

<!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>