jQuery_02效果

作者: tzktzk1 | 来源:发表于2023-11-14 20:01 被阅读0次

jQuery 效果- 隐藏和显示

jQuery提供了一个简单的界面来执行各种令人惊奇的效果。
jQuery效果方法使我们能够以最少的配置快速实现常用的效果。

jQuery hide() 和 show()

您可以使用hide()和show()方法隐藏和显示HTML元素。
下面的示例演示了hide()方法和show()方法的用法：

    <!DOCTYPE html>
    <html>
        <title>jQuery 效果- Hide 和Show显示隐藏示例 - 基础教程(nhooo.com)</title>
        <head>
            <style>
                p {
                  padding: 15px;
                  background: #7F00FF;
                  color: white;
                }
            </style>
            <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  // 隐藏显示段落
                  $("#hide-btn").click(function(){
                    $("p").hide();
                  });
                  // 显示隐藏的段落
                  $("#show-btn").click(function(){
                    $("p").show();
                  });
                });
            </script>
        </head>
        <body>
            <h2> jQuery隐藏和显示</h2>
            <p>如果单击"隐藏"按钮，所有段落将消失。</p>
            <p>然后，请点击"显示"按钮。</p>
            <button id="hide-btn">隐藏</button>
            <button id="show-btn">显示</button>
        </body>
    </html>

    这是hide() 方法的语法：
        $(selector).hide(duration, easing, callback);
    这是show()方法的语法：
        $(selector).show(duration, easing, callback);
    hide()和show()方法接受三个可选参数：
        duration -确定效果将持续多长时间。可能的值：“ slow”，“ fast”或毫秒
        easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
        callback-指定方法完成后要调用的函数

    以下示例通过hide()和show()演示了duration参数：
        示例
            $("#hide-btn").click(function(){
              $("p").hide(1000);
            });
            $("#show-btn").click(function(){
              $("p").show(1000);
            });

    以下示例使用hide()和show()演示了回调参数：
        示例
            $("#hide-btn").click(function(){
              $("div").hide(1000, function(){
                alert("DIV被隐藏");
              });
            });
            $("#show-btn").click(function(){
              $("div").show(1000, function(){
                alert("DIV被显示");
              });
            });

    动画所有跨度(在本示例中为单词)快速隐藏，在200毫秒内完成每个动画：
        示例
            $("button").click(function(){
              $("span:last-child").hide("fast", function(){
            $(this).prev().hide("fast", arguments.callee);
              });
            });

jQuery toggle()方法

    我们还可以使用toggle()方法在隐藏和显示HTML元素之间切换。
    如果所选元素最初显示，它将被隐藏；如果隐藏，它将显示出来。
    下面的示例在单击按钮时在hide和show所有<p>元素之间切换：
    示例
        $("button").click(function(){
          $("p").toggle(1500);
        });

    toggle()方法的语法如下：
        $(selector).toggle(duration, easing, callback);
    toggle()方法接受三个可选参数：
        duration  -确定效果将持续多长时间。可能的值：“ slow”，“ fast”或 毫秒
        easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
        callback-指定方法完成后要调用的函数

jQuery 效果 - 淡入淡出

jQuery提供了一个简单的界面来执行各种令人惊奇的效果。
jQuery效果方法使我们能够以最少的配置快速应用常用的效果。

jQuery淡入淡出方法

    使用jQuery，我们可以实现淡入或淡出效果。
    我们有以下jQuery淡入淡出方法：
        fadeIn()
        fadeOut()
        fadeToggle()
        fadeTo()

jQuery fadeIn() 和 fadeOut()

    jQuery fadeIn()方法逐渐将选定元素的不透明度从隐藏更改为可见。
    jQuery fadeOut()方法逐渐将选定元素的不透明度从可见更改为隐藏。
    以下示例演示了fadeIn()方法和fadeOut()方法的用法：
    示例
    // 淡出显示的段落
        $("#fadeout-btn").click(function(){
          $("p").fadeOut();
        });
    // 淡入隐藏的段落
        $("#fadein-btn").click(function(){
          $("p").fadeIn();
        });

    这是fadeIn()方法 的语法：
        $(selector).fadeIn(duration, easing, callback);
    这是fadeOut()方法 的语法：
        $(selector).fadeOut(duration, easing, callback);
    无论fadeIn()和fadeOut()方法接受三个可选参数：
        duration -确定淡入淡出效果将持续多长时间。可能的值：“ slow”，“ fast”或毫秒
        easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
        callback-指定淡入淡出方法完成后要调用的函数

    下面的示例演示了使用fadeIn()和fadeOut()的duration参数：
    示例
        $("#fadeout-btn").click(function(){
          $("p").fadeOut(1500);
        });
        $("#fadein-btn").click(function(){
          $("p").fadeIn(1500);
        });

    下面的示例演示了带有fadeIn()和fadeOut()的回调参数：
    示例
        $("#fadeout-btn").click(function(){
          $("div").fadeOut(600, function(){
            $("h3").text("淡出完成.");
          });
        });
        $("#fadein-btn").click(function(){
          $("div").fadeIn(600, function(){
            $("h3").text("淡入完成.");
          });
        });

    对所有跨度（在这种情况下为单词）进行动画处理以使其快速褪色，并在200毫秒内完成每个动画处理：
    示例
        <!DOCTYPE html>
        <html>
            <title>jQuery Effects - Fading示例 - 基础教程(nhooo.com)</title>
            <head>
                <style>
                    span {
                      background: #7F00FF;
                      color: white;
                      float: left;
                      padding: 10px 5px;
                    }
                    div {
                      margin-bottom: 15px;
                    }
                    .clearfix::after {
                      content: '';
                      clear: both;
                      display: table;
                    }
                </style>
                <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
                <script>
                    $(document).ready(function(){
                      $("#fadeout-btn").click(function(){
                        $("span:last-child").fadeOut("fast", function(){
                          $(this).prev().fadeOut("fast", arguments.callee);
                        });
                      });
                      $("#fadein-btn").click(function(){
                        $("span:first-child").fadeIn("fast", function(){
                          $(this).next().fadeIn("fast", arguments.callee);
                        });
                      });
                    });
                </script>
            </head>
            <body>
                <div class="clearfix">
                  <span>The</span> <span>purpose</span> <span>of</span>
                  <span>jQuery</span> <span>is</span> <span>to</span>
                  <span>make</span> <span>it</span> <span>much</span>
                  <span>easier</span> <span>to</span> <span>use</span>
                  <span>JavaScript</span> <span>on</span> <span>your</span>
                  <span>website.</span>
                </div>
                <button id="fadeout-btn">淡出</button>
                <button id="fadein-btn">淡入</button>
            </body>
        </html>

jQuery fadeToggle()方法

    我们还可以使用fadeToggle()方法在HTML元素的淡入和淡出之间切换。
    如果所选元素淡出，fadeToggle()则将其淡入。
    如果所选元素淡入，fadeToggle()将淡出它们。
    以下示例在所有<p>元素的淡入和淡出之间切换：
    示例
        $("button").click(function(){
          $("p").fadeToggle();
        });

    这是fadeToggle()方法 的语法：
        $(selector).fadeToggle(duration, easing, callback);
    该fadeToggle()方法接受三个可选参数：
        duration -确定淡入淡出效果将持续多长时间。可能的值：“ slow”，“ fast”或毫秒
        easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
        callback-指定淡入淡出方法完成后要调用的函数

jQuery fadeTo()方法

    jQuery fadeTo()方法逐渐将所选元素的不透明度更改为指定的不透明度。
    注意：该fadeTo()方法不会更改页面的布局（所选元素仍将占用与以前相同的空间）。
    此示例逐渐降低<div>元素的不透明度：
    示例
        $("button").click(function(){
          $("div").fadeTo(500, 0.2);
        });

    这是fadeTo()方法 的语法：
        $(selector)fadeTo.(duration, opacity, easing, callback)
    参数：
        duration -确定淡入淡出效果将持续多长时间。可能的值：“ slow”，“ fast”或毫秒
        opacity-指定要淡入的不透明度。必须是介于0.00和1.00之间的数字
        easing -（可选）指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
        callback-（可选）指定淡入淡出方法完成后要调用的函数
    下面的示例演示了带有fadeTo()的回调参数：
    示例
        $("button").click(function(){
          $("div").fadeTo(500, 0, function(){
            alert("透明度降低!!!");
          });
        });

jQuery 效果 - 滑动

jQuery提供了一个简单的界面来执行各种惊人的效果。
jQuery效果方法使我们能够以最少的配置快速应用常用的效果。

jQuery滑动方法

    使用jQuery，我们可以在元素上创建滑动效果。
    我们有以下jQuery幻灯片方法：
        slideUp()
        slideDown()
        slideToggle()

jQuery slideUp() 和 slideDown()

    slideUp()方法通过滑动隐藏选定的元素。
    slideDown()方法以滑动方式显示选定的元素。
    下面的示例演示了slideUp()方法和slideDown()方法的用法：
    示例
    // 向上滑动段落
         $("#btn1").click(function(){
              $("p").slideUp();
        });
    // 向下滑动段落
         $("#btn2").click(function(){
              $("p").slideDown();
        });

    这是slideUp() 方法的语法：
        $(selector).slideUp(duration, easing, callback);
    这是slideDown()方法的语法：
        $(selector).slideDown(duration, easing, callback);
    无论slideUp()和slideDown()方法接受三个可选参数：
        duration -确定滑动效果将运行多长时间。可能的值：“ slow”，“ fast”或毫秒
        easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
        callback-指定滑动方法完成后要调用的函数

    下面的示例演示了使用slideUp()和slideDown()的duration参数：
    示例
        $("#btn1").click(function(){
          $("p").slideUp(1500);
        });
        $("#btn2").click(function(){
          $("p").slideDown(1500);
        });

    下面的示例演示了带有slideUp()和slideDown()的回调参数：
    示例
        $("#btn1").click(function(){
          $("div").slideUp(1500, function(){
            alert("向上滑动完成!");
          });
        });
        $("#btn2").click(function(){
          $("div").slideDown(1500, function(){
            alert("向下滑动完成!");
          });
        });

    动画化所有跨度（在这种情况下为单词）以快速滑动，在200毫秒内完成每个动画：
    示例
    <!DOCTYPE html>
    <html>
        <title>jQuery 上下滑动效果slideDown和slideUp示例 - 基础教程(nhooo.com)</title>
        <head>
            <style>
                span {
                  background: #7F00FF;
                  color: white;
                  float: left;
                  padding: 10px 5px;
                }
                div {
                  margin-bottom: 15px;
                }
                .clearfix::after {
                  content: '';
                  clear: both;
                  display: table;
                }
            </style>
            <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  $("#btn1").click(function(){
                    $("span:last-child").slideUp("fast", function(){
                      $(this).prev().slideUp("fast", arguments.callee);
                    });
                  });
                  $("#btn2").click(function(){
                    $("span:first-child").slideDown("fast", function(){
                      $(this).next().slideDown("fast", arguments.callee);
                    });
                  });
                });
            </script>
        </head>
        <body>
            <div class="clearfix">
              <span>The</span> <span>purpose</span> <span>of</span>
              <span>jQuery</span> <span>is</span> <span>to</span>
              <span>make</span> <span>it</span> <span>much</span>
              <span>easier</span> <span>to</span> <span>use</span>
              <span>JavaScript</span> <span>on</span> <span>your</span>
              <span>website.</span>
            </div>
            <button id="btn1">向上滑动</button>
            <button id="btn2">向下滑动</button>
        </body>
    </html>

jQuery slideToggle()方法

    我们还可以使用slideToggle()方法在上下滑动HTML元素之间切换。
    如果所选元素最初显示，它将被隐藏；如果隐藏，它将显示出来。
    下面的示例在单击按钮时，在所有<p>元素的slideUp和slideDown之间切换：
    示例
        $("button").click(function(){
          $("p").slideToggle(1500);
        });

    这是slideToggle()method 的语法：
        $(selector).slideToggle(duration, easing, callback);
    slideToggle()方法接受三个可选参数：
        duration -确定滑动效果将运行多长时间。可能的值：“ slow”，“ fast”或毫秒
        easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
        callback-指定一个在slideToggle()方法完成后要调用的函数

jQuery 效果 - 动画

jQuery允许我们创建自定义动画。

jQuery动画-animate()方法

    jQuery animate()方法对一组CSS属性执行自定义动画。
    这是animate()方法的语法：
        $(selector).animate({styles}, duration, easing, callback)
    参数：
        {styles} -指定动画将向其移动的CSS属性和值的对象
        duration -确定动画效果将运行多长时间。可能的值：“ slow”，“ fast”或毫秒
        easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
        callback-指定在animate()方法完成后要调用的函数

    以下示例通过更改元素的宽度为元素设置动画：
    示例
        $("button").click(function(){
          $("div").animate({width: "500px"});
        });

    以下示例通过更改元素的位置来对元素进行动画处理：
    示例
        $("button").click(function(){
          $("div").animate({left: "500px"});
        });
        
    默认情况下，所有HTML元素都具有静态位置，并且静态元素无法移动。
    要操纵位置，请记住首先将元素的CSS 位置属性设置为相对，固定或绝对。

jQuery animate()-设置多个属性

    我们还可以同时为一个元素的多个属性设置动画。
    示例
        $("button").click(function(){
          $("div").animate({
            width:"500px",
            height:"400px",
            opacity: 0.3,
            left: "50px"
          });
        });

    以下示例使用animate()演示了duration和easing参数：
    示例
        $("button").click(function(){
          $("div").animate({
            width:"500px",
            height:"400px"
          }, 4000, "linear");
        });

    以下示例使用animate()演示了回调参数：
    示例
        $("button").click(function(){
          $("div").animate({
            width:"500px",
            height:"400px"
          }, 500, "linear",
          function(){
            $(this).after("<h2>动画已经完成</h2>");
          });
        });

    使用animate()方法时要记住的要点：
        所有动画属性都应设置为单个数值（例如，宽度，高度或左值）。
        字符串值不能设置为动画（例如，背景颜色）
        要设置背景颜色的动画，请使用jQuery颜色插件
        与animate()方法一起使用时，属性名称必须为camelCased，如：您应该使用paddingTop而不是padding-top，使用marginLeft而不是margin-left，等等。

jQuery animate()-使用队列动画

    默认情况下，jQuery带有动画的队列功能。
    在队列中，一个或多个功能等待运行。
    这意味着，如果您彼此之后编写多个animate()调用，则jQuery将使用这些方法调用创建一个“内部”队列。然后，它一个一个地运行动画调用。
    下面的示例首先更改DIV元素的宽度，然后更改高度，然后增加文本的字体大小：
    示例
        $("button").click(function(){
          let div = $("div");
          div.animate({width:"500px"});
          div.animate({height:"200px"});
          div.animate({fontSize: "10em"});
        });

    我们还可以使用jQuery的链接功能在一个队列中逐个动画一个元素的多个属性。
    示例
        $("button").click(function(){
          $("div")
            .animate({width:"500px"})
            .animate({height:"200px"})
            .animate({fontSize: "10em"})
            .animate({opacity: 0.3});
        });

jQuery animate()-使用相对值

    动画属性也可以是相对的。如果为值提供了前导+=或-=字符序列，则通过从属性的当前值中添加或减去给定的数字来计算目标值。
    示例
        $("p").click(function(){
          $(this).animate({
            fontSize: "+=5px",
            padding : "+=10px"
          });
        });

jQuery animate()-使用预定义值

    此外，我们甚至可以指定属性的动画值"show"，"hide"或"toggle"：
    示例
        $("button").click(function(){
          $("div").animate({height: "toggle"});
        });

jQuery 停止动画

jQuery stop()方法用于在jQuery动画或效果完成之前停止它。

jQuery stop()方法

    stop()方法将在完成之前停止当前在选定元素上运行的jQuery动画或效果。
    在元素上调用stop()时，当前正在运行的动画（如果有）立即停止。
    如果在同一元素上调用了多个动画方法，则以后的动画将放置在效果队列中。
    这是stop()方法的语法：
        $(selector).stop(clearQueue, jumpToEnd)
    stop()方法接受两个可选参数：
        clearQueue-一个布尔值，指示是否也要删除排队的动画。默认为false
        jumpToEnd-一个布尔值，指示是否立即完成当前动画。默认为false

    下面的示例停止当前正在运行的动画：
    示例
        $("button").click(function(){
          $("div").stop();
        });

    下面的示例，同时停止排队的动画：
    示例
        $("button").click(function(){
          $("div").stop(true);
        });

    下面的示例为，立即完成所有动画后停止：
    示例
    <!DOCTYPE html>
    <html>
        <title>jQuery 停止动画示例 - 基础教程(nhooo.com)</title>
        <head>
            <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  $("#btn1").click(function(){
                    $("div").animate({width:"500px"}, 1500);
                    $("div").animate({height:"400px"}, 1500);
                    $("div").animate({width:"100px"}, 1500);
                    $("div").animate({height:"100px"}, 1500);
                  });
                  $("#btn2").click(function(){
                     $("div").stop(true, true);
                  });
                });
            </script>
            <style>
                div {
                  position: relative;
                  height: 100px;
                  width: 100px;
                  margin: 10px 0;
                  background: coral;
                }
            </style>
        </head>
        <body>
            <button id="btn1">开始</button>
            <button id="btn2">停止</button>
            <div></div>
        </body>
    </html>

jQuery 回调函数(Callback)

JavaScript语句逐行执行。但是，由于jQuery效果需要一些时间才能完成，因此下一个代码行可能会在前一个效果仍在运行时执行。这会产生错误。
为了防止这种情况的发生，jQuery为每个效果方法提供了一个回调函数。
当前效果完成后，将执行回调函数。
回调函数作为效果方法的参数传递，它们通常显示为方法的最后一个参数。
典型语法： $(selector).hide(duration, easing, callback);
下面的示例具有一个回调参数，该参数是在隐藏效果完成后将执行的函数：
示例
    $("button").click(function(){
      $("p").hide("slow", function(){
        // 效果完成后要执行的代码
        alert("The paragraph is now hidden");
      });
    });

下面的示例没有回调参数，并且在隐藏效果完成之前将会显示警报框：
示例
    $("button").click(function(){
      $("p").hide("slow");
         alert("该段落现已隐藏");
    });

jQuery 链(Chaining)

jQuery提供了另一个强大的功能，称为方法链接。
链接允许我们在单个语句中的同一元素上运行多个jQuery方法。

jQuery方法链

    到目前为止，我们一次只写一个jQuery语句（一个又一个）。
    但是，有一种称为链接的技术，该技术可在单个语句中的同一元素上运行多个jQuery命令。
    这样，浏览器不必多次查找相同的元素。
    这是可能的，因为大多数jQuery方法都返回一个jQuery对象，该对象可以进一步用于调用另一个方法。
    下面的实例链在一起css()，hide()和show()方法：
    示例
        $("button").click(function(){
          $("p").css("background-color", "coral").hide(2000).show(2000);
        });

    我们还可以将一行代码分成多行以提高可读性。
    例如，以上示例中的方法序列也可以写成：
    示例
        $("button").click(function(){
          $("p")
            .css("background-color", "coral")
            .hide(2000)
            .show(2000);
        });

    我们可以在一条语句中链接任意数量的方法：
    示例
        $("button").click(function(){
          $("div")
            .animate({width:"500px"})
            .animate({height:"200px"})
            .animate({fontSize: "10em"})
            .animate({opacity: 0.3});
        });

    注意：有些jQuery方法不返回jQuery对象，而另一些仅根据我们传递给它的参数返回它。考虑以下示例：
    // 正确用法
        $("p").css("background-color", "coral").hide(2000).show(2000);
    // 错误用法
        $("p").css("background-color", "coral").hide().show();

jQuery_02效果

jQuery 效果- 隐藏和显示

jQuery hide() 和 show()

jQuery toggle()方法

jQuery 效果 - 淡入淡出

jQuery淡入淡出方法

jQuery fadeIn() 和 fadeOut()

jQuery fadeToggle()方法

jQuery fadeTo()方法

jQuery 效果 - 滑动

jQuery滑动方法

jQuery slideUp() 和 slideDown()

jQuery slideToggle()方法

jQuery 效果 - 动画

jQuery动画-animate()方法

jQuery animate()-设置多个属性

jQuery animate()-使用队列动画

jQuery animate()-使用相对值

jQuery animate()-使用预定义值

jQuery 停止动画

jQuery stop()方法

jQuery 回调函数(Callback)

jQuery 链(Chaining)

jQuery方法链

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读