En este artículo, demostraremos el efecto visual de la opción SwitchOff 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.SwitchOff('id_of_element');
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 .
Demostración: Para demostrar el uso de esta función, hemos escrito un pequeño fragmento de código. Hemos escrito una pequeña función JavaScript con el método ShowEffect() que utiliza el método SwitchOff() de esta biblioteca. ¡ Haciendo clic en Click me to SwitchOff the line! , verás el efecto claramente.
Ejemplo: para ver el efecto, primero incluya los archivos de la biblioteca en el código y luego abra este programa en el entorno local.
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.SwitchOff(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 display the image!
</div>
<br />
<div id="hideshow" onclick="ShowEffect(this);">
<img src="GEEKSIMAGES/geeks1.PNG" alt="" /><br />
Click me to switch me off.
</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