資料結構
網路
關係資料庫管理系統
作業系統
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.com/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.com/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 次瀏覽
廣告