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

Z时代
2024-01-10
分类：综合

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>