jQuery fadeOut( ) method

The fadeOut() method gradually changes the opacity, for selected elements, from visible to hidden (fading effect).Hidden elements will not be displayed at all (no longer affects the layout of the page). So The fadeOut( ) method fades out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion.


Syntax:


$(selector).fadeOut(speed,easing,callback)




Example :


<!DOCTYPE html>

<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script>

$(document).ready(function(){

    $(".btn11").click(function(){

        $("p").fadeOut()

    });

    $(".btn22").click(function(){

        $("p").fadeIn();

    });

});

  </script>

</head>

<body>


  <p>This is a paragraph. Hi friends , How Are You.?</p>


  <button class="btn11">click me to Fade out</button>

  <button class="btn22">click me to Fade in</button>


</body>

</html>