En este artículo, demostraremos el efecto de Fade usando una biblioteca de JavaScript llamada script.aculo.us . El efecto de desvanecimiento ofrece una transición de desvanecimiento suave al elemento. También podemos ajustar la duración de este efecto.
Sintaxis:
Effect.Fade('element_id');
// o
Effect.Fade('element_id', options );
Opciones:
- duración: Duración que se tarda en desvanecer el elemento, por defecto es 1.0.
- from: Es un valor flotante que representa el porcentaje de opacidad para comenzar, el valor predeterminado es 0.0.
- to: Es un valor flotante que representa el porcentaje de opacidad al final, el valor predeterminado es 1.0.
Nota: Para usar esta biblioteca, se supone que debemos instalar la biblioteca y luego usarla en nuestros programas. Y para hacerlo, puedes seguir este enlace http://script.aculo.us/downloads .
Ejemplo 1: Para demostrar el uso de esta función, hemos escrito un pequeño fragmento de código. En el que hemos escrito una pequeña función de JavaScript llamada método ShowEffect que utiliza el método Fade de esta biblioteca. ¡ Haciendo clic en Click me to Fade the line! , verás el efecto claramente.
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,controls">
</script>
<script type="text/javascript">
function ShowAction(element) {
new Effect.Fade(element,
{ duration: 1, from: 0, to: 1.0 });
}
</script>
</head>
<body>
<div onclick="ShowAction('hideshow')">
<button type="button">
Click me to Fade the line!
</button>
</div>
<br><br>
<div id="hideshow">
LINE TO FADE
</div>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = effects,controls">
</script>
<script type="text/javascript">
function ShowEffect(element) {
new Effect.Fade(element,
{ duration: 2, from: 0, to: 1.0 });
}
</script>
</head>
<body>
<div onclick="ShowEffect('geeks_1')">
<button type="button">
Click me to ShowEffect!
</button>
</div>
<br><br>
<div id="geeks_1">
<div style="width: 10%; height: 10%;
background-color: green;">
Geeks For Geeks
</div>
</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