資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究jQuery 事件處理程式中 slideDown() 函式的工作原理？
JavaScript 庫“jQuery”被認為是最有效的輕量級 JavaScript 庫。它基於內建方法，封裝了幾行 JavaScript 程式碼來執行給定的功能。可以使用一行程式碼輕鬆呼叫這些方法。在執行必要的操作時，它縮短了程式碼。
滑動效果是 jQuery 提供的眾多特效建立技術中更有用的動畫設計方法之一。讓我們深入瞭解本文，學習 jQuery 中的 slideDown() 函式。
jQuery 中的 slideDown()
slideDown() 方法可以透過使匹配元素在滑動時可見來產生滑動效果。它作用於使用 jQuery 方法和 CSS display:none 屬性隱藏的元素。
如果元素使用 visibility:hidden 屬性隱藏，則此函式無法將其顯示。
語法
以下是 slideDown() 的語法
$(selector).slideDown(speed,easing,callback)
示例
在下面的示例中，我們將使用 slideDown() 方法顯示隱藏的元素。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
h1 {
color: #DE3163;
font-family: verdana;
}
body {
background-color: #D5F5E3;
height:100px;
}
</style>
</head>
<body>
<h1 style="display:none"> TUTORIALSPOINT </h1>
<button class="tutorial"> Click </button>
<script>
$(document).ready(function() {
$(".tutorial").click(function() {
$("h1").slideDown();
});
});
</script>
</body>
</html>
當我們執行上述指令碼時，輸出視窗將彈出，在網頁上顯示點選按鈕。當用戶點選按鈕時，事件被觸發並顯示隱藏的文字。
示例
讓我們考慮另一個示例，我們將影像放在 div 點選事件中並執行 slideDown() 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
background-color: #D6EAF8;
font-family: verdana;
height:100px;
}
#tutorial {
text-align: center;
padding: 1px;
border: 1px solid #5B2C6F;
color: #DE3163;
}
#tp {
padding: 6px;
border: 1px solid #5B2C6F;
height: auto;
display: none;
}
</style>
</head>
<body>
<div id="tutorial"> CLICK </div>
<div id="tp">
<img src="https://tutorialspoint.tw/cg/images/logo.png">
<img>
</div>
<script>
$(document).ready(function() {
$('#tutorial').click(function() {
$('#tp').slideDown('fast');
})
});
</script>
</body>
</html>
執行上述指令碼後，它將生成一個輸出，其中包含顯示在網頁上的 div 文字。當用戶點選文字時，事件被觸發並在網頁上顯示隱藏的影像。
更新於：2024年1月19日
66 次檢視
廣告