script.aculo.us Fade Effect
Last Updated :
23 Nov, 2020
The script.aculo.us Effect.fade() method can be used to fade away from the DOM. The Effect.Fade() can be used with Effect.Appear() method to fade away the content and then show it again.
Syntax:
new Effect.Fade(id_of_element, [options]);
This effect does not have any specific parameters. The common parameters of the visual effects module can be used.
Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
<script type="text/javascript">
function ShowElement(element) {
new Effect.Appear(element,
{ duration: 1 });
}
function HideElement(element) {
new Effect.Fade(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="GEEKSIMAGES/gfg.png">
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...