Post
Ask Question

Top 10 Functions In JQuery

Here I am discussing the top ten functions of jQuery.

  1. hide() function
  2. show() function
  3. toggle() function
  4. slideUp() function
  5. slideDown() function
  6. slideToggle() function
  7. fadeOut() function
  8. fadeIn() function
  9. fadeToggle()
  10. animate() function

Now I'll  explain the topic.

  1. Hide function

    It is used to hide the selected html element in a simple way. As a name it only works in hidden selected element. In jQuery the Hide () method is very useful. By using this method you can hide HTML elements with the hide().
    1. <script>  
    2. // We have to use hide function to hide the element as well.  
    3. $(‘#hide_jQuery’).click(function(){  
    4.         $(‘# jQuery’).hide();  
    5. });  
    6.     $(‘#show_ jQuery’).click(function(){  
    7.         $(‘# jQuery’).show();  
    8. });  
    9.   
    10. </script>  
    11. <div id=”hide_ jQuery”></div>  
    12. <div id=”show_ jQuery”></div>  
    13. <div id=” jQuery”></div>  
    This example, we have created a hide function to hide the selected element. I have created three div tags for this purpose.

    Below is the First one, the div tag where we have to click for hiding the jQuery.
    1. <div id=”hide_ jQuery”></div>  
  2. Show function

    It  is used to show the selected html element. We can say that these functions work in the opposite in hide function. But before calling this function it must use the hide function on the same element

    Example
    1. <script>  
    2. // We have to use hide function to hide the element as well.  
    3. $(‘#hide_ jQuery’).click(function(){  
    4.         $(‘# jQuery’).hide();  
    5. });  
    6.         $(‘#show_ jQuery’).click(function(){  
    7.         $(‘# jQuery’).show();  
    8. });  
    9. </script>  
    10. <div id=”hide_ jQuery”></div>  
    11. <div id=”show_ jQuery”></div>  
    12. <div id=” jQuery”></div>  
  3. Toggle function

    It is used to both (hide, show) functions to toggle between for the click event for the selected elements. It means this function is used to hide or show the specific selected element. A toggle functions well compared to hide and show function.

    Example
    1. <!doctype html>    
    2.     <html lang="en">    
    3.         
    4.         <head>    
    5.             <meta charset="utf-8">    
    6.             <title>toggle demo</title>    
    7.             <script src="https://code.jquery.com/jquery-1.10.2.js"></script>    
    8.         </head>    
    9.         
    10.         <body>    
    11.             <button>Toggle</button>    
    12.             <div>Hello</div>    
    13.             <script>    
    14.                 $("button").click(function()    
    15.                 {    
    16.                     $("div").toggle();    
    17.                 });    
    18.             </script>    
    19.         </body>    
    20.         
    21.     </html>   
    For more details click on link.

  4. SlideUp function

    This function is used to slide and show element's up side. It slides the selected elements up and removes it slowly.

    Example
    1. <script type="text/javascript">  
    2.         $(document).ready(function ()  
    3.         {  
    4.             $("#btnSlideUp").click(function ()  
    5.             {  
    6.                 $("#login_wrapper").slideUp();  
    7.                 return false;  
    8.             });    
    9.         });  
    10.         </script>   
    For more details click on link.

  5. SlideDown function

    This function is used to slide and hide an element on down side.

    Example
    1. <script type="text/javascript">  
    2.         $(document).ready(function ()  
    3.         {  
    4.             $("#btnSlideDown").click(function ()  
    5.             {  
    6.                 $("#login_wrapper").slideDown();  
    7.                 return false;  
    8.             });  
    9.         });  
    10.         </script>  
    For more details click on link.

  6. SlideToggle function

    This method is between slideUp() method and slideDown() method. It shows/hides an element in up/down side.

    Example
    1. <script type="text/javascript">  
    2.           $(document).ready(function ()  
    3.           {              $("#btnSlideToggle").click(function ()  
    4.               {  
    5.                   $("#login_wrapper").slideToggle();  
    6.                   return false;  
    7.               });  
    8.           });  
    9.         </script>  
    For more details click on link.

  7. FadeOut Function

    The jQuery fadeOut() method fades out a visible element and hides it.

    Syntax

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

    Example
    1. <script type="text/javascript">  
    2.         $(document).ready(function ()  
    3.         {  
    4.             $("#btnEffect").click(function ()  
    5.             {  
    6.                 $("#panelPersonalInfo").fadeOut();  
    7.                 $("#panelAddressInfo").fadeOut("slow");  
    8.                 $("#panelLoginInfo").fadeOut(4000); //millisecond  
    9.                 return false;  
    10.             });  
    11.         });  
    12.     </script>   
    For more details click on link.

  8. FadeIn function

    The jQuery fadeIn() method displays a hidden element by fading it in.

    The syntax is

    $(selector).fadeIn(speed,callback);

    Example
    1. <script type="text/javascript">  
    2.         $(document).ready(function ()  
    3.         {  
    4.             $("#btnEffect").click(function ()  
    5.             {  
    6.                 $("#panelPersonalInfo").fadeIn();  
    7.                 $("#panelAddressInfo").fadeIn("slow");  
    8.                 $("#panelLoginInfo").fadeIn(4000); //millisecond  
    9.                 return false;  
    10.             });  
    11.         });  
    12.     </script>   
    For more details click on link.

  9. FadeToggle

    The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. If the page's elements are faded out then fadeToggle() will fade them in and if the elements are faded in then fadeToggle() will fade them out.

    Example
    1. <script type="text/javascript">  
    2.         $(document).ready(function ()  
    3.         {  
    4.             $("#btnEffect").click(function ()  
    5.             {  
    6.                 $("#panelPersonalInfo").fadeToggle();  
    7.                 $("#panelAddressInfo").fadeToggle("slow");  
    8.                 $("#panelLoginInfo").fadeToggle(4000); //millisecond  
    9.                 return false;  
    10.             });  
    11.         });  
    12.     </script>  
    For more details click on link.

  10. Animate function

    In jQuery the animate() method is very useful. By using this method we can change the size of elements. In this example we create a div element which contains an Image; when we move the mouse over the image, the image size will change. First of all you add an image to the application. Add a new form to the application and add the following HTML code to the aspx page.

    Example
    1. <div style="height: 100px; width: 100px; position: relative">  
    2.         <img src="animate.gif" id="img" />  
    3.     </div>  
    Now add the following code in the head section.
    1. <script type="text/javascript">  
    2.         $(document).ready(function () {  
    3.    
    4.             $("div").mouseover(function ()//mouseover function will execute when mouse pointer will reach on <div>element  
    5.             {  
    6.                $("img").animate({ height: 300 }, "slow"); //image height will change by using animate method  
    7.                $("img").animate({ width: 300 }, "slow");  
    8.                $("img").animate({ height: 100 }, "slow");  
    9.                 $("img").animate({ width: 100 }, "slow");  
    10.             });  
    11.         }  
    12.    );  
    13.   </script>  
    In the above code we create a mouseover function.
    1. $("img").animate({ height: 300 }, "slow"); //image height will change by using animate method  
    2.                $("img").animate({ width: 300 }, "slow");  
    3.                $("img").animate({ height: 100 }, "slow");  
    4.                 $("img").animate({ width: 100 }, "slow");  
    For more details click on link.


Similar Articles