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>