Toggle Effects utility is used for toggling elements with additional animations. It supports three animation props Appear, Blind and Slide.
- Appear: It simulates the Appear Effect module for hiding and showing elements
-
Slide: It simulates the SlideUp, SlideDown effect modules for hiding and
showing elements. -
Blind: It simulates the BlindUp and BlindDown effect modules for hiding and
showing elements.
Syntax:
Effect.toggle(element_id, Animation Prop, {options} );
Example:
<!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 >
|
Output: