Jquery has a rich set of libraries to implement the functionality.

1 show():-   it is used to show content which will be hidden


2 hide():-  It is used to hide content which will be shown


3 toggle():-  it will work hide and show both functionalities.


Example of the show, hide and toggle

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

           $("#btn1").click(function(){
         
              $("p").show(2000);
           });
            $("#btn2").click(function(){
         
              $("p").hide(2000);
           });
             $("#btn3").click(function(){
         
              $("p").toggle(2000);
           });
       


});



</script>
</head>
<body>

<p>damhfghjag fyadg fhdahyfghjad hadg fhdag fhad hgdgfhdf hdfgd</p>
<p>ashgf hjsag dfhadgshfg adfg adghjadg fhjd gfh gdajhfgdahfg d fda</p>

<button id="btn1">SHOW</button>
<button id="btn2">HIDE</button>
<button id="btn3">Toggle</button>



</body>
</html>




slideup() :-    it is used to move content in up dimension .


slidedown():-  it is used to move content in down dimension .


slidetoggle() :- it is used to move content in up and down dimension .



Example of slideup,slidedown and slidetoggle() in jquery ?


<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

           $("#btn1").click(function(){
         
              $("img").slideUp(2000);
           });
            $("#btn2").click(function(){
         
              $("img").slideDown(2000);
           });
             $("#btn3").click(function(){
         
              $("img").slideToggle(2000);
           });
       


});



</script>
</head>
<body>

<img src="img6.jpg" />
<br>
<button id="btn1">SLIDE UP</button>
<button id="btn2">DOWN</button>
<button id="btn3">Toggle</button>



</body>
</html>


FadeIn(),FadeOut() and FadeTo():-

It is used to increase or decrease intensity of images,video or site content?


FadeIn():-   It is used to Increase  Intensity  of Image

FadeOut():-  It is used to Decrease Intensity of Images

FadeTo() :-  It is used to change Intensity for constant value.


<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

           $("#btn1").click(function(){
         
              $("img").fadeIn(7000);
           });
            $("#btn2").click(function(){
         
              $("img").fadeOut(7000);
           });
             $("#btn3").click(function(){
         
              $("img").fadeToggle(1000);
           });
           $("#btn4").click(function(){
         
              $("img").fadeTo(3000,1);
           });
       


});



</script>
</head>
<body>

<img src="img6.jpg" />
<br>
<button id="btn1">Fade In</button>
<button id="btn2">Fade Out</button>
<button id="btn3">Fade Toggle</button>
<button id="btn4">Fade To</button>




</body>
</html>
..........................................................................................................................................

on():-  It is used to handle multiple events in Jquery.

("p").on({
    mouseenter: function(){
      $(this).css("background-color", "lightgray");
    }, 
    mouseleave: function(){
      $(this).css("background-color", "lightblue");
    },
    click: function(){
      $(this).css("background-color", "yellow");
    } 
  });


Complete Program of  on()

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").on({
    mouseenter: function(){
      $(this).css("background-color", "lightgray");
    }, 
    mouseleave: function(){
      $(this).css("background-color", "lightblue");
    },
    click: function(){
      $(this).css("background-color", "yellow");
    } 
  });
});
</script>
</head>
<body>

<p>Click or move the mouse pointer over this paragraph.</p>

</body>
</html>

Another Example of on method:-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").on({
    mouseenter: function(){
      $(this).css("background-color", "lightgray");
    }, 
    mouseleave: function(){
      $(this).css("background-color", "lightblue");
    },
    click: function(){
      $(this).css("background-color", "yellow");
    } 
  });
});
</script>
</head>
<body>

<button>Click</button>

</body>
</html>


Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post