FadeIn elements using jQuery


In this lesson, you will learn how to show an invisible element by fading it to opaque.

Introduction

The signature of .fadeIn() function has three parameters.

fadeIn( [duration] [, easing] [, call back function] )

With .fadeIn() function, you can animate the opacity of the selected element. However, it won’t let you specify the final opacity level of the element.

Duration is the time that will take to animate the opacity of the element on the web page. It is represented in the string (slow, fast, or normal) or numbers (time expressed in millimeters. 1 second has 1000 millimeters).

Higher the number is, the slower the animation will be. If you choose the string representation of the duration, it will be interpreted as 200, 400, or 600 millimeters for slow, fast, or normal speed.

If you give any other string than pre-defined values for the string representation of duration, or if the duration is missing, the default duration value ‘400 milliseconds’ is used.

The second parameter will take a string value as the name of the easing function to be used by fadeIn(). Easing functions indicates the speed at which animation completes. The default value is easing function, which has slightly faster speed at the start and end as compared to the middle animation’s speed. Another function called linear progresses the animation at a constant speed.

The third parameter is a function which is called at the time fadeIn() function completes its animation. The callback is called on the ‘this’ element being animated. This is supposed to be used when you need to execute more than one animation in a sequence for the selected element.

Example FadeIn elements in jQuery

In this example, we will create three DIVs 100px wide and 40px tall; In the beginning, the display property of all these DIVs are set as none which will hide these elements. There is also a hyperlink which will start the animation when clicked.

FadeIn() Example
FadeIn() Example

When the link ‘Show boxes’ is clicked, the first box will appear, then the second, and then third. This effect has been achieved using the call back functions in the first and second fadeIn() function, which further call a function to apply fade in effect on the next element.

The HTML

<div id="container">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<p><a href="#" id="anim">Starts animation</a></p>
</div>
</div>

The CSS

.box{width:100px; height:40px; margin:2px; display:none;}
.one{background-color:#d9eb4b;}
.two{background-color:#00A9FE;}
.three{background-color:#fd6bb6;}

The jQuery

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" ></script> 
<script>
    $(document).ready(function() {
        $('#anim').click(function() {
            $('.one').fadeIn("1000", function() {
                $('.two').fadeIn("2000", function() {
                    $('.three').fadeIn("3000");
                });
            });

        });
    }); 
</script>

As you can see, after the third box fades in, the text of hyperlink changes too. This is achieved through a simple call back function. Practice this example to understand it better. If you need to ask any question related to this lesson, please feel free to leave it in the comments section below.

jQuery Toggle Visibility Tutorial Home jQuery FadeOut Elements

 

 

Tutorials Panel

About Tutorials Panel

programming tutorial and source code for Software Engineers and developers. https://twitter.com/TutorialsPanel

View all posts by Tutorials Panel →

Leave a Reply