在本文中，我們將通過使用JavaScript庫(稱為script.aculo.us)來實現SlideUp選項的視覺效果，該JavaScript庫可以從一個平滑過渡到另一個。我們也可以調整效果的持續時間。
用法:
Effect.SlideUp('id_of_element');
或者
Effect.SlideUp('id_of_element', { duration:3.0 });
注意：要使用此庫，我們應該下載該庫，然後在程序中使用它。為此，您可以點擊此鏈接http://script.aculo.us/downloads。
方法：為了演示該函數的用法，我們編寫了一小段代碼。我們編寫了一個名為ShowEffect方法的小型JavaScript函數，該函數使用此庫的SlideUp方法。通過單擊“單擊我以使圖像上載幻燈片！”，您將清楚地看到效果。
例：要查看效果，請先安裝該庫，然後在本地環境中打開此程序。
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = effects">
</script>
<script type="text/javascript">
function ShowEffect(element) {
new Effect.SlideUp(element,
{ duration:3.0 });
}
function displayImage(element) {
new Effect.Appear(element,
{ duration:1, from:1.1, to:1.2 });
}
</script>
</head>
<body>
<div onclick="displayImage('hideshow')">
Click me to SlideUp the image!
</div>
<br />
<div id="hideshow" onclick="ShowEffect(this);">
<img src="GEEKSIMAGES/geeks1.PNG" alt="" /><br />
Image to SlideUp
</div>
</body>
</html> 輸出：
相關用法
注：本文由純淨天空篩選整理自Jitender_1998大神的英文原創作品 script.aculo.us SlideUp Effect。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。