En este artículo, demostraremos el efecto visual de la opción SlideUp mediante el uso de la biblioteca de JavaScript llamada script.aculo.us que tiene una transición fluida de una a otra. También podemos ajustar la duración del efecto.
Sintaxis:
Effect.SlideUp('id_of_element');
o
Effect.SlideUp('id_of_element', { duration: 3.0 });
Nota: Para usar esta biblioteca, se supone que debemos descargar la biblioteca y luego usarla en nuestros programas. Y para hacerlo puedes seguir este enlace http://script.aculo.us/downloads .
Enfoque: Para demostrar el uso de esta función, hemos escrito un pequeño fragmento de código. Hemos escrito una pequeña función de JavaScript llamada método ShowEffect que utiliza el método SlideUp de esta biblioteca. Al hacer clic en Click me to SlideUp the image! , verás el efecto claramente.
Ejemplo: para ver el efecto, primero instale la biblioteca y luego abra este programa en el entorno local.
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por Jitender_1998 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA