script.aculo.us Fade Effect

script.aculo.us Opacity Effect

Last Updated : 20 Nov, 2020

The script.aculo.us Opacity effect is one of the core effects which allows us to gradually change an element's opacity to a given level. This effect starts with the element's current opacity unless the 'from' option is defined and ends with an opacity defined by the 'to' option, the default opacity value is 1.0.

Syntax:

new Effect.Opacity('id_of_element', [options]);

Example 1: This example shows how to change the opacity to Show or Hide the Content.

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>

Output:

Out

Example 2: Changing the Opacity of the Content.

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>

Output:

Output

script.aculo.us Fade Effect

S

swapnil074

Improve

Article Tags :

Similar Reads

script.aculo.us Pulsate Effect

In this article we will demonstrate the effect of Pulsate by using JavaScript library called script.aculo.us having smooth transition from one to another. We can adjust the duration of the effect as well. Syntax: Effect.Pulsate('id_of_element'); Effect.Pulsate('id_of_element', { pulses: 5, duration:

script.aculo.us Morph Effect

The script.aculo.us libraryÂ is a cross-browser library that aims at improving the user interface of a website.Â In this article, we will demonstrate the Morph effect. This effect is used for smoothly changing the CSS style of an element to the one given as the parameter. We can adjust the duration of

script.aculo.us Fade Effect

In this article, we will demonstrate the effect of Fade by using a JavaScript library called script.aculo.us. The fade effect offers a smooth fading transition to the element. We can also adjust the duration of this effect as well. Syntax: Effect.Fade('element_id'); // or Effect.Fade('element_id', o

script.aculo.us Fade Effect

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

script.aculo.us Move Effect

The script.aculo.us libraryÂ is a cross-browser library that aims to improving the user interface of a website. In this article, we will demonstrate the Move effect. This effect is used for making the element smoothly move to the given parameters. We can adjust the duration of the effect as well. Syn

script.aculo.us Puff Effect

In this article, we will demonstrate the effect of Puff by using JavaScript library called script.aculo.us having smooth transition from one to another. We can adjust the duration of the effect as well. Syntax: Effect.Puff('id_of_element'); Effect.Puff('id_of_element', { duration: 3 }); Note: To use

script.aculo.us Fold Effect

In this article, we will demonstrate the effect of Fold by using a JavaScript library called script.aculo.us having a smooth scaling down first in the vertical direction and then horizontal toward the left to finally disappear. We can adjust the duration of the effect as well. Syntax: Effect.Fold('i

script.aculo.us Grow Effect

The script.aculo.us libraryÂ is a cross-browser library that aims at improving the user interface of a website.Â In this article, we will demonstrate the Grow effect. This effect is used for making the element grow with a smooth transition from a direction. We can adjust the duration of the effect as

script.aculo.us Scale Effect

This effect is used for gradually scaling an element up or down, either vertically or horizontally. It changes an element width and height dimensions and the base for em units. Syntax: new Effect.Scale('element_id', percent, [options]); or new Effect.Scale(element, percent, [options]); Effect Option

script.aculo.us Parallel Effect

The script.aculo.us libraryÂ is a cross-browser library that aims to improving the user interface of a website. In this article, we will demonstrate the Parallel effect. This effect is used for combining multiple effects for use on the given element. We can adjust the duration of the effect as well.