Search This Blog

Jquery Methods for animation and effects


1) show():-   It is used to show content after hiding

2) hide():-   It is used to hide content

3) toggle():-  It will show data and hide data both

Complete Example of show(),hide() and toggle() in Jquery:-

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
     $(document).ready(function(){
         $("#btn1").click(function(){
          $("p").show(1000);
         });
          $("#btn2").click(function(){
          $("p").hide(1000);
         });
           $("#btn3").click(function(){
          $("p").toggle(1000);
         });
     })
</script>
</head>
<body>
<p>sdjgasd sjhdgashdgjhasgjh gasjhgjhf</p>
<p>sdjgasd sjhdgashdgjhasgjh gasjhgjhf</p>
<p>sdjgasd sjhdgashdgjhasgjh gasjhgjhf</p>
<p>sdjgasd sjhdgashdgjhasgjh gasjhgjhf</p>
<p>sdjgasd sjhdgashdgjhasgjh gasjhgjhf</p>
<button id="btn1">SHOW</button>
<button id="btn2">HIDE</button>
<button id="btn3">TOGGLE</button>
</body>
</html>

4) slideup():-   it is used to provide scroll-up images or content

5) slidedown:-  It is used to provide scroll down to images or content


6) slideToggle():-  it will perform slidup and slidedown operation both


Example of slideup(),slidedown(),slideToggle() example in Jquery:-

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
     $(document).ready(function(){
         $("#btn1").click(function(){
          $("img").slideUp(1000);
         });
          $("#btn2").click(function(){
          $("img").slideDown(1000);
         });
           $("#btn3").click(function(){
          $("img").slideToggle(1000);
         });
     })
</script>
</head>
<body>
<img src="banner.jpg" width="300" height="300"  />
<br><br>
<button id="btn1">SHOW</button>
<button id="btn2">HIDE</button>
<button id="btn3">TOGGLE</button>
</body>
</html>

7) fadeIn,fadeOut,fadeTo:-  it is used to increase,decrease and fix opacity of image content or page content.

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
     $(document).ready(function(){
         $("#btn1").click(function(){
          $("img").fadeIn(3000);
         });
          $("#btn2").click(function(){
          $("img").fadeOut(3000);
         });
           $("#btn4").click(function(){
            $("img").fadeToggle(1000);
         });
           $("#btn3").click(function(){
          $("img").fadeTo(1000,0.1);
         });
     })
</script>
</head>
<body>
<img src="banner.jpg" width="300" height="300"  />
<br><br>
<button id="btn1">FADE IN</button>
<button id="btn2">FADE OUT</button>
<button id="btn4">FADE Toggle</button>
<button id="btn3">FADE TO</button>
</body>
</html>


7) animate():-  It is used to perform animation using Jquery, we can shift content to right, left, bottom, and up a dimension.



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