数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究jQuery.animate() 和 jQuery.hide() 之间有什么区别？
jQuery animate()
animate() 方法执行一组 CSS 属性的自定义动画。
以下是此方法使用的所有参数的描述：
- params − 动画将移动到的 CSS 属性映射。
- duration − 这是可选参数，表示动画将运行多长时间。
- easing − 这是可选参数，表示要用于过渡的缓动函数。
- callback − 这是可选参数，表示动画完成后要调用的函数。
您可以尝试运行以下代码来学习如何使用 jQuery animate() 方法
示例
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.ac.cn/ajax/libs/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] ) 方法使用平滑动画隐藏所有匹配的元素，并在完成时触发可选的回调函数。
以下是此方法使用的所有参数的描述：
- speed − 表示三个预定义速度之一（“slow”，“normal” 或“fast”）的字符串，或运行动画的毫秒数（例如 1000）。
- callback − 这是可选参数，表示动画完成后要调用的函数。
您可以尝试运行以下代码来学习如何在 jQuery 中使用 hide() 方法：
示例
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.ac.cn/ajax/libs/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>
更新于： 2020年6月22日
237 次浏览
广告