La utilidad Toggle Effects se utiliza para alternar elementos con animaciones adicionales. Admite tres accesorios de animación : Aparecer , Ciego y Deslizar .
- Aparecer: simula el módulo Efecto de aparición para ocultar y mostrar elementos.
- Slide: Simula los módulos de efecto SlideUp , SlideDown para ocultar y
mostrar elementos. - Blind: Simula los módulos de efectos BlindUp y BlindDown para ocultar y
mostrar elementos.
Sintaxis:
Effect.toggle(element_id, Animation Prop, {options} );
Ejemplo:
<!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>
function AppearEffect(element) {
new Effect.toggle(element, 'Appear', {
duration: 3
});
}
function BlindEffect(element) {
new Effect.toggle(element, 'Blind', {
duration: 3
});
}
function SlideEffect(element) {
new Effect.toggle(element, 'Slide', {
duration: 3
});
}
</script>
</head>
<body>
<div>
<Button onclick="AppearEffect('element')">
Appear Effect</Button>
<Button onclick="SlideEffect('element')">
SlideEffect</Button>
<Button onclick="BlindEffect('element')">
BlindEffect</Button>
</div>
<div id='element'>
<img src="gfg.png" />
</div>
</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