jQuery fade | tutorials with examples

Last updated on Aug 30, 2016

Milan Sanathara

jQuery / JS

1

jQuery fadeIn / fadeOut Examples

We have shaded light on jQuery animation,jQury interactive UI development as well as other jQuery features.In this blog we are focusing on jQuery fading effects and  jQuery fadeIn / fadeOut Examples.

The meaning of Fade is gradually growing faint and disappear,jQuery fading exactly does this on DOM element.

In jQuery, The fade effect hides or shows an element by fading it.

Following are the types of jQuery Fading effects:

  • .fadeIn()
  • .fadeOut()
  • .fadeToggle()
  • .fadeTO()

TO start learning you should have some basic idea of following key-features of fading effects.

Duration : A string or number determining how long the animation will run.

Easing : A string indicating which easing function to use for the transition.

Complete : A function to call once the animation is complete, called once per matched element.

jQuery fadeIn() Method :

The jQuery fadeIn() method is used to fade in a hidden element.

In the fadeIn() method, we can pass three parameters to the method.

.fadeIn('duration','easing',complete) //complete is a function()

Basic use of FadeIn effect :

Note : First include following js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <div class="col-md-12 well">
                    <h3>Basic Fading</h3>
                    <h4>What is jQuery Fading?</h4>
                    <p class="at_font" style="display: none;" id="simple_fadein">
                        The jQuery fadeIn() method is used to fade in a hidden element.
                        Syntax: $(selector).fadeIn(speed,callback); The optional speed parameter specifies the duration of the effect.
                    </p>
                    <button class="btn btn-default" id="at_simple_btn">Click</button>
                    <script>
                        $("#at_simple_btn").click(function () {
                            $("#simple_fadein").fadeIn();
                        });
                    </script>
                </div>

FadeIn a block over content:

  <div class="col-md-12 well">
                    <h3>Basic Fading Over content</h3>
                    <hr>
                    <h4>What is jQuery Fading?</h4>
                    <p class="at_font" id="at_fade_over_div">
                        The jQuery fadeIn() method is used to fade in a hidden element.
                        Syntax: $(selector).fadeIn(speed,callback); The optional speed parameter specifies the duration of the effect.
                    </p>
                    <div class="col-md-12" id="blue_div">
                        <span id="blue_span">AlphansoTech</span>
                    </div>

                    <button class="btn btn-default" id="at_fade_over">Click</button>
                    <script>
                        $("#at_fade_over").click(function () {
                            $("#at_fade_over_div").fadeOut('fast');
                            $("#blue_div").fadeIn(3000, function () {
                                $("#blue_span").fadeIn(5000);
                            });

                        });

                    </script>
                </div>

Fade In child Element One By One :

      <div class="col-md-12 well">
                        <h3>Fade In child Element One By One</h3>
                        <hr>
                        <h4>AlphansoTech Web Services</h4>
                        <div id="parent_div">
                            <p class="none at_font"><i class="fa fa-hand-o-right"></i> Web Design And Development</p>
                            <p class="none at_font"><i class="fa fa-hand-o-right"></i> Android Development</p>
                            <p class="none at_font"><i class="fa fa-hand-o-right"></i> iFone Development</p>
                            <p class="none at_font"><i class="fa fa-hand-o-right"></i> WordPress Development</p>
                            <p class="none at_font"><i class="fa fa-hand-o-right"></i> Website Clone</p>
                        </div>
                        <button class="btn btn-default" id="at_explorer">Explorer</button>
                    </div>

    <script>
                    $("#at_explorer").click(function () {
/*Basically, the jQuery .each() function is used to loop through each element of the target jQuery object. Very useful for multi element DOM manipulation, looping arrays and object properties.*/
                        $("#parent_div").children().each(function (index) { //index is the sequence of particular child element
                            $(this).delay(500 * index).fadeIn(300); 
                        });
                    });
                </script>

jQuery .each() function :

Basically, the jQuery .each() function is used to loop through each element of the target jQuery object. Very useful for multi-element DOM manipulation, looping arrays and object properties.

FadeOut jQuery Method :

                   <div class="col-md-12 well">
                        <h3>Fade Out </h3>
                        <hr>
                        <h4>AlphansoTech Web Services</h4>
                        <div id="parent_div">
                            <p class="at_font"><i class="fa fa-hand-o-right"></i> Web Design And Development <a class="text-danger at_remove_service"><i class="fa fa-trash"></i></a></p>
                            <p class="at_font"><i class="fa fa-hand-o-right"></i> Android Development <a class="text-danger at_remove_service"><i class="fa fa-trash"></i></a></p>
                            <p class="at_font"><i class="fa fa-hand-o-right"></i> iFone Development <a class="text-danger at_remove_service"><i class="fa fa-trash"></i></a></p>
                            <p class="at_font"><i class="fa fa-hand-o-right"></i> WordPress Development <a class="text-danger at_remove_service"><i class="fa fa-trash"></i></a></p>
                            <p class="at_font"><i class="fa fa-hand-o-right"></i> Website Clone <a class="text-danger at_remove_service"><i class="fa fa-trash"></i></a></p>
                        </div>
                    </div>
               <script>
                    $(".at_remove_service").click(function () {
                        $(this).parent('.at_font').fadeOut('slow');
                    });
                </script>

FadeOut All one by One :

     <div class="col-md-12 well">
                        <h3>Fade Out All</h3>
                        <hr>
                        <h4>AlphansoTech Web Services</h4>
                        <button id="delete_all" class="btn btn-danger">Delete All</button>
                        <p>&nbsp;</p>
                        <div id="parent_div_remove">
                            <p class="at_font"><i class="fa fa-hand-o-right"></i> Web Design And Development</p>
                            <p class="at_font"><i class="fa fa-hand-o-right"></i> Android Development</p>
                            <p class="at_font"><i class="fa fa-hand-o-right"></i> iFone Development</p>
                            <p class="at_font"><i class="fa fa-hand-o-right"></i> WordPress Development</p>
                            <p class="at_font"><i class="fa fa-hand-o-right"></i> Website Clone</p>
                        </div>

                    </div>
   <script>
                    $("#delete_all").click(function () {
                        $("#parent_div_remove").children().each(function (index) {
                            $(this).delay(500 * index).fadeOut(300);
                        });
                    });
                </script>

FadeToggle jQuery Method :

It is the combined method of fadeIn and fadeOut.

While there is a need for hiding/show any element with fading effect,we can use the fadeToggle method in place of both fadeIn and fadeOut.

   <div class="col-md-12 well">
                        <h3>Fade Toggle</h3>
                        <hr>
                        <div style="height: 200px;">
                            <div style="height: 150px;width: 150px;background-color: #00f;" id="at_toggle_div">

                            </div>
                        </div>
                        <button class="btn btn-default" id="at_toggle">FadeIn/Out</button>
                    </div>
          <script>
             $("#at_toggle").click(function () {
                 $("#at_toggle_div").fadeToggle('slow');
             });
         </script>

fadeTo jQuery Method :

The fadeTo( ) method fades the opacity of all matched elements to a specified opacity and firing an optional callback after completion.

Syntax :
selector.fadeTo(speed, opacity[, callback]);
Parameters :

speed : A string representing one of the three predefined speeds (“slow”, “def”, or “fast”) or the number of milliseconds to run the animation (e.g. 1000).

opacity : A number between 0 and 1 denoting the target opacity.

callback : This is an optional parameter representing a function to call once the animation is complete.

    <div class="col-md-12 well">
                        <h3>Fade To</h3>
                        <hr>
                        <div style="height: 200px;">

                            <img src="http://www.petit-train-colmar.fr/wp-content/uploads/2014/12/train-slider-ok-2.png" style="width: 20%;" id="at_fadeto_div"/>

                        </div>
                        <button class="btn btn-default" id="at_fadeto">FadeTO Light</button>
                    </div>
  <script>
                    $("#at_fadeto").click(function () {
                        $("#at_fadeto_div").fadeTo('slow', '0.5', function () { //callback function
                            $("#at_fadeto_div").animate({width: '50%'}, 'slow');
                        });
                    });
                </script>

 

Live demo fo jQuery fading effects

[sociallocker]

Live demo fo jQuery fading effects

[/sociallocker]

I hope you will find this post very useful regarding jQuery Fading effects. Let me know any questions if you have in comment regarding fading effects. I will reply you ASAP.

Have you got a cool idea about Web Development ? Contact us Now to get a free consultation on your idea.  Alphanso Tech is rated as one of the best Website Development Company in India.

Post by Milan Sanathara

I am iOS Application Developer with an aspiration of learning new technology and creating a bright future in Information Technology.

One Response to jQuery fade | tutorials with examples

  1. Pingback: jQuery navigation menu examples | step by step tutorial guide

Leave a Reply

Your email address will not be published. Required fields are marked *