在本文中，我们将通过使用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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。