jQuery 淡入淡出、滑动和动画

一、淡入淡出

1、jQuery fadeIn() 方法

  jQuery fadeIn() 用于淡入已隐藏的元素。

       语法：$(selector).fadeIn(speed,callback);

  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() 方法：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $("button").click(function(){
    

    8. 

  8. 

    

        $("#div1").fadeIn();
    

    9. 

  9. 

    

        $("#div2").fadeIn("slow");
    

    10. 

  10. 

    

        $("#div3").fadeIn(3000);
    

    11. 

  11. 

    

      });
    

    12. 

  12. 

    

    });
    

    13. 

  13. 

    

    </script>
    

    14. 

  14. 

    

    </head>
    

    15. 

  15. 

    

    <body>
    

    16. 

  16. 

    

    
<p>演示带有不同参数的 fadeIn() 方法。</p>

    

    17. 

  17. 

    

    
<button>点击这里，使三个矩形淡入</button>

    

    18. 

  18. 

    

    
<br><br>

    

    19. 

  19. 

    

    
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>

    

    20. 

  20. 

    

    <br>
    

    21. 

  21. 

    

    
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>

    

    22. 

  22. 

    

    <br>
    

    23. 

  23. 

    

    
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

    

    24. 

  24. 

    

    </body>
    

    25. 

  25. 

    

    </html>
    

    26.
  • 1

jQuery 淡入淡出、滑动和动画         jQuery 淡入淡出、滑动和动画

 

2、jQuery fadeOut() 方法

  jQuery fadeOut() 方法用于淡出可见元素。

       语法：$(selector).fadeOut(speed,callback);

  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeOut() 方法：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script type="text/javascript">

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $("button").click(function(){
    

    8. 

  8. 

    

        $("#div1").fadeOut();
    

    9. 

  9. 

    

        $("#div2").fadeOut("slow");
    

    10. 

  10. 

    

        $("#div3").fadeOut(3000);
    

    11. 

  11. 

    

      });
    

    12. 

  12. 

    

    });
    

    13. 

  13. 

    

    </script>
    

    14. 

  14. 

    

    </head>
    

    15. 

  15. 

    

    <body>
    

    16. 

  16. 

    

    
<p>演示带有不同参数的 fadeOut() 方法。</p>

    

    17. 

  17. 

    

    
<button>点击这里，使三个矩形淡出</button>

    

    18. 

  18. 

    

    
<br><br>

    

    19. 

  19. 

    

    
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

    

    20. 

  20. 

    

    <br>
    

    21. 

  21. 

    

    
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

    

    22. 

  22. 

    

    <br>
    

    23. 

  23. 

    

    
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

    

    24. 

  24. 

    

    </body>
    

    25. 

  25. 

    

    </html>
    

    26.
  • 1
jQuery 淡入淡出、滑动和动画    jQuery 淡入淡出、滑动和动画

 

3、jQuery fadeToggle() 方法

  jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

         语法：$(selector).fadeToggle(speed,callback);

  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $("button").click(function(){
    

    8. 

  8. 

    

        $("#div1").fadeToggle();
    

    9. 

  9. 

    

        $("#div2").fadeToggle("slow");
    

    10. 

  10. 

    

        $("#div3").fadeToggle(3000);
    

    11. 

  11. 

    

      });
    

    12. 

  12. 

    

    });
    

    13. 

  13. 

    

    </script>
    

    14. 

  14. 

    

    </head>
    

    15. 

  15. 

    

    <body>
    

    16. 

  16. 

    

    
<p>演示带有不同参数的 fadeToggle() 方法。</p>

    

    17. 

  17. 

    

    
<button>点击这里，使三个矩形淡入淡出</button>

    

    18. 

  18. 

    

    
<br><br>

    

    19. 

  19. 

    

    
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

    

    20. 

  20. 

    

    <br>
    

    21. 

  21. 

    

    
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

    

    22. 

  22. 

    

    <br>
    

    23. 

  23. 

    

    
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

    

    24. 

  24. 

    

    </body>
    

    25. 

  25. 

    

    </body>
    

    26. 

  26. 

    

    </html>
    

    27.
  • 1


4、jQuery fadeTo() 方法

  jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

          语法：$(selector).fadeTo(speed,opacity,callback);

  必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeTo() 方法：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $("button").click(function(){
    

    8. 

  8. 

    

        $("#div1").fadeTo("slow",0.15);
    

    9. 

  9. 

    

        $("#div2").fadeTo("slow",0.4);
    

    10. 

  10. 

    

        $("#div3").fadeTo("slow",0.7);
    

    11. 

  11. 

    

      });
    

    12. 

  12. 

    

    });
    

    13. 

  13. 

    

    </script>
    

    14. 

  14. 

    

    </head>
    

    15. 

  15. 

    

    <body>
    

    16. 

  16. 

    

    
<p>演示带有不同参数的 fadeTo() 方法。</p>

    

    17. 

  17. 

    

    
<button>点击这里，使三个矩形淡出</button>

    

    18. 

  18. 

    

    
<br><br>

    

    19. 

  19. 

    

    
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

    

    20. 

  20. 

    

    <br>
    

    21. 

  21. 

    

    
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

    

    22. 

  22. 

    

    <br>
    

    23. 

  23. 

    

    
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

    

    24. 

  24. 

    

    </body>
    

    25. 

  25. 

    

    </html>
    

    26.
  • 1

jQuery 淡入淡出、滑动和动画    jQuery 淡入淡出、滑动和动画

 

 

二、滑动

1、jQuery slideDown() 方法

  jQuery slideDown() 方法用于向下滑动元素。

       语法：$(selector).slideDown(speed,callback);

  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideDown() 方法：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script type="text/javascript">

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $(".flip").click(function(){
    

    8. 

  8. 

    

        $(".panel").slideDown("slow");
    

    9. 

  9. 

    

      });
    

    10. 

  10. 

    

    });
    

    11. 

  11. 

    

    </script>
    

    12. 

  12. 

    

    
<style type="text/css">

    

    13. 

  13. 

    

    
div.panel,p.flip

    

    14. 

  14. 

    

    {
    

    15. 

  15. 

    

    
margin:0px;
    

    16. 

  16. 

    

    
padding:5px;
    

    17. 

  17. 

    

    
text-align:center;
    

    18. 

  18. 

    

    
background:#e5eecc;
    

    19. 

  19. 

    

    
border:solid 1px #c3c3c3;
    

    20. 

  20. 

    

    }
    

    21. 

  21. 

    

    
div.panel

    

    22. 

  22. 

    

    {
    

    23. 

  23. 

    

    
height:120px;
    

    24. 

  24. 

    

    
display:none;
    

    25. 

  25. 

    

    }
    

    26. 

  26. 

    

    </style>
    

    27. 

  27. 

    

    </head>
    

    28. 

  28. 

    

    <body>
    

    29. 

  29. 

    

    <div class="panel">
    

    30. 

  30. 

    

    
<p>W3School - 领先的 Web 技术教程站点</p>

    

    31. 

  31. 

    

    
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>

    

    32. 

  32. 

    

    </div>
    

    33. 

  33. 

    

    
<p class="flip">请点击这里</p>

    

    34. 

  34. 

    

    </body>
    

    35. 

  35. 

    

    </html>
    

    36.
  • 1

jQuery 淡入淡出、滑动和动画

 

 

2、jQuery slideUp() 方法

  jQuery slideUp() 方法用于向上滑动元素。

      语法：$(selector).slideUp(speed,callback);

  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideUp() 方法：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script type="text/javascript">

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $(".flip").click(function(){
    

    8. 

  8. 

    

        $(".panel").slideUp("slow");
    

    9. 

  9. 

    

      });
    

    10. 

  10. 

    

    });
    

    11. 

  11. 

    

    </script>
    

    12. 

  12. 

    

    
<style type="text/css">

    

    13. 

  13. 

    

    
div.panel,p.flip

    

    14. 

  14. 

    

    {
    

    15. 

  15. 

    

    
margin:0px;
    

    16. 

  16. 

    

    
padding:5px;
    

    17. 

  17. 

    

    
text-align:center;
    

    18. 

  18. 

    

    
background:#e5eecc;
    

    19. 

  19. 

    

    
border:solid 1px #c3c3c3;
    

    20. 

  20. 

    

    }
    

    21. 

  21. 

    

    
div.panel

    

    22. 

  22. 

    

    {
    

    23. 

  23. 

    

    
height:120px;
    

    24. 

  24. 

    

    }
    

    25. 

  25. 

    

    </style>
    

    26. 

  26. 

    

    </head>
    

    27. 

  27. 

    

    <body>
    

    28. 

  28. 

    

    <div class="panel">
    

    29. 

  29. 

    

    
<p>W3School - 领先的 Web 技术教程站点</p>

    

    30. 

  30. 

    

    
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>

    

    31. 

  31. 

    

    </div>
    

    32. 

  32. 

    

    
<p class="flip">请点击这里</p>

    

    33. 

  33. 

    

    </body>
    

    34. 

  34. 

    

    </html>
    

    35.
  • 1


 jQuery 淡入淡出、滑动和动画

3、jQuery slideToggle() 方法

  jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。

             $(selector).slideToggle(speed,callback);

  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideToggle() 方法：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script type="text/javascript">

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

    $(".flip").click(function(){
    

    8. 

  8. 

    

        $(".panel").slideToggle("slow");
    

    9. 

  9. 

    

      });
    

    10. 

  10. 

    

    });
    

    11. 

  11. 

    

    </script>
    

    12. 

  12. 

    

    
<style type="text/css">

    

    13. 

  13. 

    

    
div.panel,p.flip

    

    14. 

  14. 

    

    {
    

    15. 

  15. 

    

    
margin:0px;
    

    16. 

  16. 

    

    
padding:5px;
    

    17. 

  17. 

    

    
text-align:center;
    

    18. 

  18. 

    

    
background:#e5eecc;
    

    19. 

  19. 

    

    
border:solid 1px #c3c3c3;
    

    20. 

  20. 

    

    }
    

    21. 

  21. 

    

    
div.panel

    

    22. 

  22. 

    

    {
    

    23. 

  23. 

    

    
height:120px;
    

    24. 

  24. 

    

    
display:none;
    

    25. 

  25. 

    

    }
    

    26. 

  26. 

    

    </style>
    

    27. 

  27. 

    

    </head>
    

    28. 

  28. 

    

    <body>
    

    29. 

  29. 

    

    <div class="panel">
    

    30. 

  30. 

    

    
<p>W3School - 领先的 Web 技术教程站点</p>

    

    31. 

  31. 

    

    
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>

    

    32. 

  32. 

    

    </div>
    

    33. 

  33. 

    

    
<p class="flip">请点击这里</p>

    

    34. 

  34. 

    

    </body>
    

    35. 

  35. 

    

    </html>
    

    36.
  • 1


三、动画

1、jQuery 动画 - animate() 方法

   jQuery animate() 方法用于创建自定义动画。

         语法：$(selector).animate({params},speed,callback);

   必需的 params 参数定义形成动画的 CSS 属性。

   可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

   可选的 callback 参数是动画完成后所执行的函数名称。

   下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js">

    

    5. 

  5. 

    

    </script>
    

    6. 

  6. 

    

    
<script>

    

    7. 

  7. 

    

    $(document).ready(function(){
    

    8. 

  8. 

    

      $("button").click(function(){
    

    9. 

  9. 

    

        $("div").animate({left:'250px'});
    

    10. 

  10. 

    

      });
    

    11. 

  11. 

    

    });
    

    12. 

  12. 

    

    </script>
    

    13. 

  13. 

    

    </head>
    

    14. 

  14. 

    

    <body>
    

    15. 

  15. 

    

    
<button>开始动画</button>

    

    16. 

  16. 

    

    
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

    

    17. 

  17. 

    

    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    

    18. 

  18. 

    

    </div>
    

    19. 

  19. 

    

    </body>
    

    20. 

  20. 

    

    </html>
    

    21.
  • 1

jQuery 淡入淡出、滑动和动画

 

  提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！


2、jQuery animate() - 操作多个属性

请注意，生成动画的过程中可同时使用多个属性：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js">

    

    5. 

  5. 

    

    </script>
    

    6. 

  6. 

    

    
<script>

    

    7. 

  7. 

    

    $(document).ready(function(){
    

    8. 

  8. 

    

      $("button").click(function(){
    

    9. 

  9. 

    

        $("div").animate({
    

    10. 

  10. 

    

          left:'250px',
    

    11. 

  11. 

    

          opacity:'0.5',
    

    12. 

  12. 

    

          height:'150px',
    

    13. 

  13. 

    

          width:'150px'

    

    14. 

  14. 

    

        });
    

    15. 

  15. 

    

      });
    

    16. 

  16. 

    

    });
    

    17. 

  17. 

    

    </script>
    

    18. 

  18. 

    

    </head>
    

    19. 

  19. 

    

    <body>
    

    20. 

  20. 

    

    
<button>开始动画</button>

    

    21. 

  21. 

    

    
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

    

    22. 

  22. 

    

    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    

    23. 

  23. 

    

    </div>
    

    24. 

  24. 

    

    </body>
    

    25. 

  25. 

    

    </html>
    

    26.
  • 1
jQuery 淡入淡出、滑动和动画

   提示：可以用 animate() 方法来操作所有 CSS 属性，不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

3、jQuery animate() - 使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $("button").click(function(){
    

    8. 

  8. 

    

        $("div").animate({
    

    9. 

  9. 

    

          left:'250px',
    

    10. 

  10. 

    

          height:'+=150px',
    

    11. 

  11. 

    

          width:'+=150px'

    

    12. 

  12. 

    

        });
    

    13. 

  13. 

    

      });
    

    14. 

  14. 

    

    });
    

    15. 

  15. 

    

    </script>
    

    16. 

  16. 

    

    </head>
    

    17. 

  17. 

    

    <body>
    

    18. 

  18. 

    

    
<button>开始动画</button>

    

    19. 

  19. 

    

    
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

    

    20. 

  20. 

    

    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    

    21. 

  21. 

    

    </div>
    

    22. 

  22. 

    

    </body>
    

    23. 

  23. 

    

    </html>
    

    24.
  • 1

jQuery 淡入淡出、滑动和动画

 

4、jQuery animate() - 使用预定义的值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $("button").click(function(){
    

    8. 

  8. 

    

        $("div").animate({
    

    9. 

  9. 

    

          height:'toggle'

    

    10. 

  10. 

    

        });
    

    11. 

  11. 

    

      });
    

    12. 

  12. 

    

    });
    

    13. 

  13. 

    

    </script>
    

    14. 

  14. 

    

    </head>
    

    15. 

  15. 

    

    <body>
    

    16. 

  16. 

    

    
<button>开始动画</button>

    

    17. 

  17. 

    

    
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

    

    18. 

  18. 

    

    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    

    19. 

  19. 

    

    </div>
    

    20. 

  20. 

    

    </body>
    

    21. 

  21. 

    

    </html>
    

    22.
  • 1
jQuery 淡入淡出、滑动和动画

 

5、jQuery animate() - 使用队列功能

  默认地，jQuery 提供针对动画的队列功能。这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

实例：如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $("button").click(function(){
    

    8. 

  8. 

    

        var div=$("div");
    

    9. 

  9. 

    

        div.animate({height:'300px',opacity:'0.4'},"slow");
    

    10. 

  10. 

    

        div.animate({width:'300px',opacity:'0.8'},"slow");
    

    11. 

  11. 

    

        div.animate({height:'100px',opacity:'0.4'},"slow");
    

    12. 

  12. 

    

        div.animate({width:'100px',opacity:'0.8'},"slow");
    

    13. 

  13. 

    

      });
    

    14. 

  14. 

    

    });
    

    15. 

  15. 

    

    </script>
    

    16. 

  16. 

    

    </head>
    

    17. 

  17. 

    

    <body>
    

    18. 

  18. 

    

    
<button>开始动画</button>

    

    19. 

  19. 

    

    
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

    

    20. 

  20. 

    

    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    

    21. 

  21. 

    

    </div>
    

    22. 

  22. 

    

    </body>
    

    23. 

  23. 

    

    </html>
    

    24.
  • 1

jQuery 淡入淡出、滑动和动画

 

 

四、停止动画

  jQuery stop() 方法用于停止动画或效果，在它们完成之前。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

            语法：$(selector).stop(stopAll,goToEnd);

  可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

  可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

  因此，默认地，stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法，不带参数：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $("#flip").click(function(){
    

    8. 

  8. 

    

        $("#panel").slideDown(5000);
    

    9. 

  9. 

    

      });
    

    10. 

  10. 

    

      $("#stop").click(function(){
    

    11. 

  11. 

    

        $("#panel").stop();
    

    12. 

  12. 

    

      });
    

    13. 

  13. 

    

    });
    

    14. 

  14. 

    

    </script>
    

    15. 

  15. 

    

     
    

    16. 

  16. 

    

    
<style type="text/css">

    

    17. 

  17. 

    

    
#panel,#flip

    

    18. 

  18. 

    

    {
    

    19. 

  19. 

    

    
padding:5px;
    

    20. 

  20. 

    

    
text-align:center;
    

    21. 

  21. 

    

    
background-color:#e5eecc;
    

    22. 

  22. 

    

    
border:solid 1px #c3c3c3;
    

    23. 

  23. 

    

    }
    

    24. 

  24. 

    

    #panel
    

    25. 

  25. 

    

    {
    

    26. 

  26. 

    

    
padding:50px;
    

    27. 

  27. 

    

    
display:none;
    

    28. 

  28. 

    

    }
    

    29. 

  29. 

    

    </style>
    

    30. 

  30. 

    

    </head>
    

    31. 

  31. 

    

    <body>
    

    32. 

  32. 

    

    
<button id="stop">停止滑动</button>

    

    33. 

  33. 

    

    
<div id="flip">点击这里，向下滑动面板</div>

    

    34. 

  34. 

    

    
<div id="panel">Hello world!</div>

    

    35. 

  35. 

    

    </body>
    

    36. 

  36. 

    

    </html>
    

    37.
  • 1

jQuery 淡入淡出、滑动和动画

 

五、Chaining

  通过 jQuery，可以把动作/方法链接起来。Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

  直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。提示：这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

  例子1、下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function()

    

    7. 

  7. 

    

      {
    

    8. 

  8. 

    

      $("button").click(function(){
    

    9. 

  9. 

    

        $("#p1").css("color","red").slideUp(2000).slideDown(2000);
    

    10. 

  10. 

    

      });
    

    11. 

  11. 

    

    });
    

    12. 

  12. 

    

    </script>
    

    13. 

  13. 

    

    </head>
    

    14. 

  14. 

    

    <body>
    

    15. 

  15. 

    

    
<p id="p1">jQuery 乐趣十足！</p>

    

    16. 

  16. 

    

    
<button>点击这里</button>

    

    17. 

  17. 

    

    </body>
    

    18. 

  18. 

    

    </html>
    

    19.
  • 1

   如果需要，我们也可以添加多个方法调用。提示：当进行链接时，代码行会变得很差。不过，jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。

例子2、这样写也可以运行：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function()

    

    7. 

  7. 

    

      {
    

    8. 

  8. 

    

      $("button").click(function(){
    

    9. 

  9. 

    

        $("#p1").css("color","red")
    

    10. 

  10. 

    

          .slideUp(2000)
    

    11. 

  11. 

    

          .slideDown(2000);
    

    12. 

  12. 

    

      });
    

    13. 

  13. 

    

    });
    

    14. 

  14. 

    

    </script>
    

    15. 

  15. 

    

    </head>
    

    16. 

  16. 

    

    <body>
    

    17. 

  17. 

    

    
<p id="p1">jQuery 乐趣十足！</p>

    

    18. 

  18. 

    

    
<button>点击这里</button>

    

    19. 

  19. 

    

    </body>
    

    20. 

  20. 

    

    </html>
    

    21.
  • 1

jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行。

        </div>
					<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-2011a91181.css" rel="stylesheet">
            </div>
</article>

一、淡入淡出

1、jQuery fadeIn() 方法

  jQuery fadeIn() 用于淡入已隐藏的元素。

       语法：$(selector).fadeIn(speed,callback);

  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() 方法：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $("button").click(function(){
    

    8. 

  8. 

    

        $("#div1").fadeIn();
    

    9. 

  9. 

    

        $("#div2").fadeIn("slow");
    

    10. 

  10. 

    

        $("#div3").fadeIn(3000);
    

    11. 

  11. 

    

      });
    

    12. 

  12. 

    

    });
    

    13. 

  13. 

    

    </script>
    

    14. 

  14. 

    

    </head>
    

    15. 

  15. 

    

    <body>
    

    16. 

  16. 

    

    
<p>演示带有不同参数的 fadeIn() 方法。</p>

    

    17. 

  17. 

    

    
<button>点击这里，使三个矩形淡入</button>

    

    18. 

  18. 

    

    
<br><br>

    

    19. 

  19. 

    

    
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>

    

    20. 

  20. 

    

    <br>
    

    21. 

  21. 

    

    
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>

    

    22. 

  22. 

    

    <br>
    

    23. 

  23. 

    

    
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

    

    24. 

  24. 

    

    </body>
    

    25. 

  25. 

    

    </html>
    

    26.
  • 1

jQuery 淡入淡出、滑动和动画         jQuery 淡入淡出、滑动和动画

 

2、jQuery fadeOut() 方法

  jQuery fadeOut() 方法用于淡出可见元素。

       语法：$(selector).fadeOut(speed,callback);

  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeOut() 方法：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script type="text/javascript">

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $("button").click(function(){
    

    8. 

  8. 

    

        $("#div1").fadeOut();
    

    9. 

  9. 

    

        $("#div2").fadeOut("slow");
    

    10. 

  10. 

    

        $("#div3").fadeOut(3000);
    

    11. 

  11. 

    

      });
    

    12. 

  12. 

    

    });
    

    13. 

  13. 

    

    </script>
    

    14. 

  14. 

    

    </head>
    

    15. 

  15. 

    

    <body>
    

    16. 

  16. 

    

    
<p>演示带有不同参数的 fadeOut() 方法。</p>

    

    17. 

  17. 

    

    
<button>点击这里，使三个矩形淡出</button>

    

    18. 

  18. 

    

    
<br><br>

    

    19. 

  19. 

    

    
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

    

    20. 

  20. 

    

    <br>
    

    21. 

  21. 

    

    
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

    

    22. 

  22. 

    

    <br>
    

    23. 

  23. 

    

    
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

    

    24. 

  24. 

    

    </body>
    

    25. 

  25. 

    

    </html>
    

    26.
  • 1
jQuery 淡入淡出、滑动和动画    jQuery 淡入淡出、滑动和动画

 

3、jQuery fadeToggle() 方法

  jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

         语法：$(selector).fadeToggle(speed,callback);

  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $("button").click(function(){
    

    8. 

  8. 

    

        $("#div1").fadeToggle();
    

    9. 

  9. 

    

        $("#div2").fadeToggle("slow");
    

    10. 

  10. 

    

        $("#div3").fadeToggle(3000);
    

    11. 

  11. 

    

      });
    

    12. 

  12. 

    

    });
    

    13. 

  13. 

    

    </script>
    

    14. 

  14. 

    

    </head>
    

    15. 

  15. 

    

    <body>
    

    16. 

  16. 

    

    
<p>演示带有不同参数的 fadeToggle() 方法。</p>

    

    17. 

  17. 

    

    
<button>点击这里，使三个矩形淡入淡出</button>

    

    18. 

  18. 

    

    
<br><br>

    

    19. 

  19. 

    

    
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

    

    20. 

  20. 

    

    <br>
    

    21. 

  21. 

    

    
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

    

    22. 

  22. 

    

    <br>
    

    23. 

  23. 

    

    
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

    

    24. 

  24. 

    

    </body>
    

    25. 

  25. 

    

    </body>
    

    26. 

  26. 

    

    </html>
    

    27.
  • 1


4、jQuery fadeTo() 方法

  jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

          语法：$(selector).fadeTo(speed,opacity,callback);

  必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeTo() 方法：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $("button").click(function(){
    

    8. 

  8. 

    

        $("#div1").fadeTo("slow",0.15);
    

    9. 

  9. 

    

        $("#div2").fadeTo("slow",0.4);
    

    10. 

  10. 

    

        $("#div3").fadeTo("slow",0.7);
    

    11. 

  11. 

    

      });
    

    12. 

  12. 

    

    });
    

    13. 

  13. 

    

    </script>
    

    14. 

  14. 

    

    </head>
    

    15. 

  15. 

    

    <body>
    

    16. 

  16. 

    

    
<p>演示带有不同参数的 fadeTo() 方法。</p>

    

    17. 

  17. 

    

    
<button>点击这里，使三个矩形淡出</button>

    

    18. 

  18. 

    

    
<br><br>

    

    19. 

  19. 

    

    
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

    

    20. 

  20. 

    

    <br>
    

    21. 

  21. 

    

    
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

    

    22. 

  22. 

    

    <br>
    

    23. 

  23. 

    

    
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

    

    24. 

  24. 

    

    </body>
    

    25. 

  25. 

    

    </html>
    

    26.
  • 1

jQuery 淡入淡出、滑动和动画    jQuery 淡入淡出、滑动和动画

 

 

二、滑动

1、jQuery slideDown() 方法

  jQuery slideDown() 方法用于向下滑动元素。

       语法：$(selector).slideDown(speed,callback);

  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideDown() 方法：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script type="text/javascript">

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $(".flip").click(function(){
    

    8. 

  8. 

    

        $(".panel").slideDown("slow");
    

    9. 

  9. 

    

      });
    

    10. 

  10. 

    

    });
    

    11. 

  11. 

    

    </script>
    

    12. 

  12. 

    

    
<style type="text/css">

    

    13. 

  13. 

    

    
div.panel,p.flip

    

    14. 

  14. 

    

    {
    

    15. 

  15. 

    

    
margin:0px;
    

    16. 

  16. 

    

    
padding:5px;
    

    17. 

  17. 

    

    
text-align:center;
    

    18. 

  18. 

    

    
background:#e5eecc;
    

    19. 

  19. 

    

    
border:solid 1px #c3c3c3;
    

    20. 

  20. 

    

    }
    

    21. 

  21. 

    

    
div.panel

    

    22. 

  22. 

    

    {
    

    23. 

  23. 

    

    
height:120px;
    

    24. 

  24. 

    

    
display:none;
    

    25. 

  25. 

    

    }
    

    26. 

  26. 

    

    </style>
    

    27. 

  27. 

    

    </head>
    

    28. 

  28. 

    

    <body>
    

    29. 

  29. 

    

    <div class="panel">
    

    30. 

  30. 

    

    
<p>W3School - 领先的 Web 技术教程站点</p>

    

    31. 

  31. 

    

    
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>

    

    32. 

  32. 

    

    </div>
    

    33. 

  33. 

    

    
<p class="flip">请点击这里</p>

    

    34. 

  34. 

    

    </body>
    

    35. 

  35. 

    

    </html>
    

    36.
  • 1

jQuery 淡入淡出、滑动和动画

 

 

2、jQuery slideUp() 方法

  jQuery slideUp() 方法用于向上滑动元素。

      语法：$(selector).slideUp(speed,callback);

  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideUp() 方法：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script type="text/javascript">

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $(".flip").click(function(){
    

    8. 

  8. 

    

        $(".panel").slideUp("slow");
    

    9. 

  9. 

    

      });
    

    10. 

  10. 

    

    });
    

    11. 

  11. 

    

    </script>
    

    12. 

  12. 

    

    
<style type="text/css">

    

    13. 

  13. 

    

    
div.panel,p.flip

    

    14. 

  14. 

    

    {
    

    15. 

  15. 

    

    
margin:0px;
    

    16. 

  16. 

    

    
padding:5px;
    

    17. 

  17. 

    

    
text-align:center;
    

    18. 

  18. 

    

    
background:#e5eecc;
    

    19. 

  19. 

    

    
border:solid 1px #c3c3c3;
    

    20. 

  20. 

    

    }
    

    21. 

  21. 

    

    
div.panel

    

    22. 

  22. 

    

    {
    

    23. 

  23. 

    

    
height:120px;
    

    24. 

  24. 

    

    }
    

    25. 

  25. 

    

    </style>
    

    26. 

  26. 

    

    </head>
    

    27. 

  27. 

    

    <body>
    

    28. 

  28. 

    

    <div class="panel">
    

    29. 

  29. 

    

    
<p>W3School - 领先的 Web 技术教程站点</p>

    

    30. 

  30. 

    

    
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>

    

    31. 

  31. 

    

    </div>
    

    32. 

  32. 

    

    
<p class="flip">请点击这里</p>

    

    33. 

  33. 

    

    </body>
    

    34. 

  34. 

    

    </html>
    

    35.
  • 1


 jQuery 淡入淡出、滑动和动画

3、jQuery slideToggle() 方法

  jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。

             $(selector).slideToggle(speed,callback);

  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideToggle() 方法：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script type="text/javascript">

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

    $(".flip").click(function(){
    

    8. 

  8. 

    

        $(".panel").slideToggle("slow");
    

    9. 

  9. 

    

      });
    

    10. 

  10. 

    

    });
    

    11. 

  11. 

    

    </script>
    

    12. 

  12. 

    

    
<style type="text/css">

    

    13. 

  13. 

    

    
div.panel,p.flip

    

    14. 

  14. 

    

    {
    

    15. 

  15. 

    

    
margin:0px;
    

    16. 

  16. 

    

    
padding:5px;
    

    17. 

  17. 

    

    
text-align:center;
    

    18. 

  18. 

    

    
background:#e5eecc;
    

    19. 

  19. 

    

    
border:solid 1px #c3c3c3;
    

    20. 

  20. 

    

    }
    

    21. 

  21. 

    

    
div.panel

    

    22. 

  22. 

    

    {
    

    23. 

  23. 

    

    
height:120px;
    

    24. 

  24. 

    

    
display:none;
    

    25. 

  25. 

    

    }
    

    26. 

  26. 

    

    </style>
    

    27. 

  27. 

    

    </head>
    

    28. 

  28. 

    

    <body>
    

    29. 

  29. 

    

    <div class="panel">
    

    30. 

  30. 

    

    
<p>W3School - 领先的 Web 技术教程站点</p>

    

    31. 

  31. 

    

    
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>

    

    32. 

  32. 

    

    </div>
    

    33. 

  33. 

    

    
<p class="flip">请点击这里</p>

    

    34. 

  34. 

    

    </body>
    

    35. 

  35. 

    

    </html>
    

    36.
  • 1


三、动画

1、jQuery 动画 - animate() 方法

   jQuery animate() 方法用于创建自定义动画。

         语法：$(selector).animate({params},speed,callback);

   必需的 params 参数定义形成动画的 CSS 属性。

   可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

   可选的 callback 参数是动画完成后所执行的函数名称。

   下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js">

    

    5. 

  5. 

    

    </script>
    

    6. 

  6. 

    

    
<script>

    

    7. 

  7. 

    

    $(document).ready(function(){
    

    8. 

  8. 

    

      $("button").click(function(){
    

    9. 

  9. 

    

        $("div").animate({left:'250px'});
    

    10. 

  10. 

    

      });
    

    11. 

  11. 

    

    });
    

    12. 

  12. 

    

    </script>
    

    13. 

  13. 

    

    </head>
    

    14. 

  14. 

    

    <body>
    

    15. 

  15. 

    

    
<button>开始动画</button>

    

    16. 

  16. 

    

    
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

    

    17. 

  17. 

    

    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    

    18. 

  18. 

    

    </div>
    

    19. 

  19. 

    

    </body>
    

    20. 

  20. 

    

    </html>
    

    21.
  • 1

jQuery 淡入淡出、滑动和动画

 

  提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！


2、jQuery animate() - 操作多个属性

请注意，生成动画的过程中可同时使用多个属性：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js">

    

    5. 

  5. 

    

    </script>
    

    6. 

  6. 

    

    
<script>

    

    7. 

  7. 

    

    $(document).ready(function(){
    

    8. 

  8. 

    

      $("button").click(function(){
    

    9. 

  9. 

    

        $("div").animate({
    

    10. 

  10. 

    

          left:'250px',
    

    11. 

  11. 

    

          opacity:'0.5',
    

    12. 

  12. 

    

          height:'150px',
    

    13. 

  13. 

    

          width:'150px'

    

    14. 

  14. 

    

        });
    

    15. 

  15. 

    

      });
    

    16. 

  16. 

    

    });
    

    17. 

  17. 

    

    </script>
    

    18. 

  18. 

    

    </head>
    

    19. 

  19. 

    

    <body>
    

    20. 

  20. 

    

    
<button>开始动画</button>

    

    21. 

  21. 

    

    
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

    

    22. 

  22. 

    

    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    

    23. 

  23. 

    

    </div>
    

    24. 

  24. 

    

    </body>
    

    25. 

  25. 

    

    </html>
    

    26.
  • 1
jQuery 淡入淡出、滑动和动画

   提示：可以用 animate() 方法来操作所有 CSS 属性，不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

3、jQuery animate() - 使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $("button").click(function(){
    

    8. 

  8. 

    

        $("div").animate({
    

    9. 

  9. 

    

          left:'250px',
    

    10. 

  10. 

    

          height:'+=150px',
    

    11. 

  11. 

    

          width:'+=150px'

    

    12. 

  12. 

    

        });
    

    13. 

  13. 

    

      });
    

    14. 

  14. 

    

    });
    

    15. 

  15. 

    

    </script>
    

    16. 

  16. 

    

    </head>
    

    17. 

  17. 

    

    <body>
    

    18. 

  18. 

    

    
<button>开始动画</button>

    

    19. 

  19. 

    

    
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

    

    20. 

  20. 

    

    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    

    21. 

  21. 

    

    </div>
    

    22. 

  22. 

    

    </body>
    

    23. 

  23. 

    

    </html>
    

    24.
  • 1

jQuery 淡入淡出、滑动和动画

 

4、jQuery animate() - 使用预定义的值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $("button").click(function(){
    

    8. 

  8. 

    

        $("div").animate({
    

    9. 

  9. 

    

          height:'toggle'

    

    10. 

  10. 

    

        });
    

    11. 

  11. 

    

      });
    

    12. 

  12. 

    

    });
    

    13. 

  13. 

    

    </script>
    

    14. 

  14. 

    

    </head>
    

    15. 

  15. 

    

    <body>
    

    16. 

  16. 

    

    
<button>开始动画</button>

    

    17. 

  17. 

    

    
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

    

    18. 

  18. 

    

    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    

    19. 

  19. 

    

    </div>
    

    20. 

  20. 

    

    </body>
    

    21. 

  21. 

    

    </html>
    

    22.
  • 1
jQuery 淡入淡出、滑动和动画

 

5、jQuery animate() - 使用队列功能

  默认地，jQuery 提供针对动画的队列功能。这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

实例：如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $("button").click(function(){
    

    8. 

  8. 

    

        var div=$("div");
    

    9. 

  9. 

    

        div.animate({height:'300px',opacity:'0.4'},"slow");
    

    10. 

  10. 

    

        div.animate({width:'300px',opacity:'0.8'},"slow");
    

    11. 

  11. 

    

        div.animate({height:'100px',opacity:'0.4'},"slow");
    

    12. 

  12. 

    

        div.animate({width:'100px',opacity:'0.8'},"slow");
    

    13. 

  13. 

    

      });
    

    14. 

  14. 

    

    });
    

    15. 

  15. 

    

    </script>
    

    16. 

  16. 

    

    </head>
    

    17. 

  17. 

    

    <body>
    

    18. 

  18. 

    

    
<button>开始动画</button>

    

    19. 

  19. 

    

    
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

    

    20. 

  20. 

    

    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    

    21. 

  21. 

    

    </div>
    

    22. 

  22. 

    

    </body>
    

    23. 

  23. 

    

    </html>
    

    24.
  • 1

jQuery 淡入淡出、滑动和动画

 

 

四、停止动画

  jQuery stop() 方法用于停止动画或效果，在它们完成之前。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

            语法：$(selector).stop(stopAll,goToEnd);

  可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

  可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

  因此，默认地，stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法，不带参数：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function(){
    

    7. 

  7. 

    

      $("#flip").click(function(){
    

    8. 

  8. 

    

        $("#panel").slideDown(5000);
    

    9. 

  9. 

    

      });
    

    10. 

  10. 

    

      $("#stop").click(function(){
    

    11. 

  11. 

    

        $("#panel").stop();
    

    12. 

  12. 

    

      });
    

    13. 

  13. 

    

    });
    

    14. 

  14. 

    

    </script>
    

    15. 

  15. 

    

     
    

    16. 

  16. 

    

    
<style type="text/css">

    

    17. 

  17. 

    

    
#panel,#flip

    

    18. 

  18. 

    

    {
    

    19. 

  19. 

    

    
padding:5px;
    

    20. 

  20. 

    

    
text-align:center;
    

    21. 

  21. 

    

    
background-color:#e5eecc;
    

    22. 

  22. 

    

    
border:solid 1px #c3c3c3;
    

    23. 

  23. 

    

    }
    

    24. 

  24. 

    

    #panel
    

    25. 

  25. 

    

    {
    

    26. 

  26. 

    

    
padding:50px;
    

    27. 

  27. 

    

    
display:none;
    

    28. 

  28. 

    

    }
    

    29. 

  29. 

    

    </style>
    

    30. 

  30. 

    

    </head>
    

    31. 

  31. 

    

    <body>
    

    32. 

  32. 

    

    
<button id="stop">停止滑动</button>

    

    33. 

  33. 

    

    
<div id="flip">点击这里，向下滑动面板</div>

    

    34. 

  34. 

    

    
<div id="panel">Hello world!</div>

    

    35. 

  35. 

    

    </body>
    

    36. 

  36. 

    

    </html>
    

    37.
  • 1

jQuery 淡入淡出、滑动和动画

 

五、Chaining

  通过 jQuery，可以把动作/方法链接起来。Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

  直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。提示：这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

  例子1、下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function()

    

    7. 

  7. 

    

      {
    

    8. 

  8. 

    

      $("button").click(function(){
    

    9. 

  9. 

    

        $("#p1").css("color","red").slideUp(2000).slideDown(2000);
    

    10. 

  10. 

    

      });
    

    11. 

  11. 

    

    });
    

    12. 

  12. 

    

    </script>
    

    13. 

  13. 

    

    </head>
    

    14. 

  14. 

    

    <body>
    

    15. 

  15. 

    

    
<p id="p1">jQuery 乐趣十足！</p>

    

    16. 

  16. 

    

    
<button>点击这里</button>

    

    17. 

  17. 

    

    </body>
    

    18. 

  18. 

    

    </html>
    

    19.
  • 1

   如果需要，我们也可以添加多个方法调用。提示：当进行链接时，代码行会变得很差。不过，jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。

例子2、这样写也可以运行：

    

  1. 

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    <html>
    

    3. 

  3. 

    

    <head>
    

    4. 

  4. 

    

    
<script src="/jquery/jquery-1.11.1.min.js"></script>

    

    5. 

  5. 

    

    
<script>

    

    6. 

  6. 

    

    $(document).ready(function()

    

    7. 

  7. 

    

      {
    

    8. 

  8. 

    

      $("button").click(function(){
    

    9. 

  9. 

    

        $("#p1").css("color","red")
    

    10. 

  10. 

    

          .slideUp(2000)
    

    11. 

  11. 

    

          .slideDown(2000);
    

    12. 

  12. 

    

      });
    

    13. 

  13. 

    

    });
    

    14. 

  14. 

    

    </script>
    

    15. 

  15. 

    

    </head>
    

    16. 

  16. 

    

    <body>
    

    17. 

  17. 

    

    
<p id="p1">jQuery 乐趣十足！</p>

    

    18. 

  18. 

    

    
<button>点击这里</button>

    

    19. 

  19. 

    

    </body>
    

    20. 

  20. 

    

    </html>
    

    21.
  • 1

jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行。

        </div>
					<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-2011a91181.css" rel="stylesheet">
            </div>
</article>

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode