Last updated on February 15th, 2022 at 09:53 am

This tutorial will show you how to implement FADE IN and FADE OUT effect using simple JQUERY script. Here we are just defining and element with an id FadeInOut and then fadeIn() and fadeOut() function available in jQuery to implement the effect.

<script src="http://mistonline.in/wp/demo/jquery-1.2.3.min.js" type="text/javascript">
</script>
<script type="text/javascript">
  $(document).ready(function(){
      $("#FadeOut").click(function () {
          $("#FadeInOut").fadeOut(3000);
        });
         
        $("#FadeIn").click(function () {
          $("#FadeInOut").fadeIn(3000);
        });
   });
</script>
<button id="FadeOut">Fade Out</button>&nbsp;&nbsp;<button id="FadeIn">Fade In</button>
<p id="FadeInOut">This line will FADE In and FADE out once you press the above buttons</p>

Demo

One thought on “How to fade in and out using Jquery”

Leave a Reply

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