El efecto de opacidad script.aculo.us es uno de los efectos principales que nos permite cambiar gradualmente la opacidad de un elemento a un nivel determinado. Este efecto comienza con la opacidad actual del elemento a menos que se defina la opción ‘desde’ y termina con una opacidad definida por la opción ‘hasta’, el valor de opacidad predeterminado es 1.0.
Sintaxis:
new Effect.Opacity('id_of_element', [options]);
Ejemplo 1: este ejemplo muestra cómo cambiar la opacidad para mostrar u ocultar el contenido.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="./javascript/prototype.js">
</script>
<script type="text/javascript"
src="./javascript/scriptaculous.js?load = effects">
</script>
<script type="text/javascript">
function ShowElement(element) {
new Effect.Opacity(element, {
duration: 1, from: 0, to: 1.0 });
}
function HideElement(element) {
new Effect.Opacity(element, {
duration: 1, from: 1.0, to: 0 });
}
</script>
</head>
<body>
<div onclick="ShowElement('element')">
<Button>Show Content</Button>
</div>
<br />
<div onclick="HideElement('element')">
<Button>Hide Content</Button>
</div>
<br />
<img id="element" src="./gfg.png">
</body>
</html>
Producción:
Ejemplo 2: Cambiando la Opacidad del Contenido.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="./javascript/prototype.js">
</script>
<script type="text/javascript"
src="./javascript/scriptaculous.js?load = effects">
</script>
<script type="text/javascript">
function ShowElement(element) {
new Effect.Opacity(element, {
duration: 1.5, from: 0.5, to: 1.0 });
}
function HideElement(element) {
new Effect.Opacity(element, {
duration: 1.5, from: 1.0, to: 0.3 });
}
</script>
</head>
<body>
<div onclick="ShowElement('element')">
<Button>Show Content</Button>
</div>
<br />
<div onclick="HideElement('element')">
<Button>Fade Content</Button>
</div>
<br />
<img id="element" src="./gfg.png">
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por swapnil074 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA