En este artículo, demostraremos el efecto de Appear usando una biblioteca de JavaScript llamada script.aculo.us . El efecto de aparición ofrece una transición de apariencia suave al elemento. También podemos ajustar la duración de este efecto.
Sintaxis:
Effect.Appear('element_id');
// o
Effect.Appear('element_id', [options]);
Opciones:
- duración: Duración que se tarda en desvanecer el elemento, el valor predeterminado 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 Appear de esta biblioteca. Al hacer clic en Haga clic en mí para que aparezca la línea! , 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 ShowEffect(element) {
new Effect.Appear(element,
{ duration: 1, from: 0, to: 1.0 });
}
</script>
</head>
<body>
<div onclick="ShowEffect('geeks_1')">
<button type="button">
Click me to Appear the line!
</button>
</div>
<br />
<br />
<div id="geeks_1">
LINE TO APPEAR
</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.Appear(element,
{ duration: 1, from: 0, to: 1.0 });
}
</script>
</head>
<body>
<div onclick="ShowEffect('geeks_1')">
<button type="button">
Click me to Appear the line!
</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