JQuery Effects – Hide and Show Elements

JQuery effects are some of the most amazing functionalities of JQuery. JQuery effects include functionalities like hiding/showing the elements, fade and animate elements etc. This article explains how JQuery elements can be hidden and displayed using the hide and show functions respectively. Let’s have a look how both functions work.

Hiding Elements with Hide Function

Calling hide() function on any html element hides the element. The hide() function takes two optional parameters: speed and callback. Speed parameter defines the speed of hiding the element. it can take values like “slow”, “fast” or milliseconds. The callback is the function which executes when the hide() function completes its functionalities. We shall see call backs in the later sections. Take a look at this example.

<!DOCTYPE html>
<html>
<head>
    
    <title>Hide Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("h1").click(function(){
           $(this).hide(1000);
         });
           
         });
      </script>
    
</head>
    
<body>
    
    <h1>This is heading1</h1>
    <p>This is a random paragraph</p>
    
</body>

</html>

Download Code
Run Code

The above html code contains an h1 heading and a paragraph. When the user clicks on h1 heading an event is fired. JQuery click function handles this event. Inside the click function, the “this” keyword selects the element which has generated the event. In this case, h1 has generated the event therefore, “this’ keyword selects h1. Then the hide() function is called on the h1 element. The hide() function has a speed of “1000” which means that h1 element will be hidden in one second.

Displaying Elements with Show Function

Displaying elements via show() function is similar to hide() function. It also takes speed and callback as two optional parameters. Have a look at the following example to understand this.

<!DOCTYPE html>
<html>
<head>
    
    <title>Show Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("p").click(function(){
           $("h1").show(1000);
         });
           
         });
      </script>
    
    <style>
        h1{display: none;}
    
    </style>
    
</head>
    
<body>
    
    <h1>This is heading1</h1>
    <p>This is a random paragraph</p>
    
</body>

</html>

Download Code
Run Code

In the above code, the display style for h1 has been set to none by default. This hides the h1 elements when the page loads. When the user clicks the “p” element, this h1 element is displayed on the page using show() function.

<<< JQuery Events HandlingJQuery Fade Effects >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .