jQuery.animate()和jQuery.hide()有什么区别?

jQuery的 animate()

animate()方法对一组CSS属性执行自定义动画。

这是此方法使用的所有参数的描述-

  • params-动画将朝其移动的CSS属性的映射。

  • 持续时间-这是可选参数,表示动画将运行多长时间。

  • 缓动-这是可选参数,表示用于过渡的缓动功能。

  • callback-这是可选参数,表示动画完成后要调用的函数。

您可以尝试运行以下代码来学习如何使用jQueryanimate()方法:

示例

<html>

<head>
   <title>jQuery Example</title>
      <script type = "text/javascript"
      src = "https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

      <script type = "text/javascript" language = "javascript">

      $(document).ready(function() {

         $("#out").click(function(){
            $("#block").animate({
               width: "70%",
               opacity: 0.4,
               marginLeft: "0.6in",
               fontSize: "3em",
               borderWidth: "10px"
            }, 1500 );
         });

         $("#in").click(function(){
            $("#block").animate({
            width: "100",
            opacity: 1.0,
            marginLeft: "0in",
            fontSize: "100%",
            borderWidth: "1px"
         }, 1500 );
      });
   });
   </script>

<style>
div {background-color:#bca; width:100px; border:1px solid blue;}
</style>
</head>

<body>
<p>Click on any of the buttons</p>

   <button id = "out"> Animate Out </button>
   <button id = "in"> Animate In</button>

<div id = "block">Hello</div>

</body>
</html>

jQuery的 hide()

hide(speed,[callback])方法使用优美的动画隐藏所有匹配的元素,并在完成后触发可选的回调。

这是此方法使用的所有参数的描述-

  • 速度-代表三个预定义速度(“慢”,“正常”或“快”)之一或运行动画的毫秒数(例如1000)的字符串。

  • callback-这是可选参数,表示动画完成后要调用的函数。

您可以尝试运行以下代码以了解如何hide()在jQuery中使用方法-

示例

<html>
<head>
<title>The jQuery Example</title>
   <script type = "text/javascript"
   src = "https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

      <script type = "text/javascript" language = "javascript">

      $(document).ready(function() {

         $("#show").click(function () {
            $(".mydiv").show( 200 );
         });

         $("#hide").click(function () {
            $(".mydiv").hide( 200 );
         });

      });

   </script>

<style>
.mydiv{ margin:10px;padding:12px; border:2px solid #666; width:100px; height:100px;}
</style>
</head>
<body>
<div class = "mydiv">
This is a SQUARE.
</div>

   <input id = "hide" type = "button" value = "Hide" />
   <input id = "show" type = "button" value = "Show" />
</body>
</html>