Gain insights into jQuery for interactive web pages with animations, event-handling, AJAX, and DOM manipulation. Explore core concepts and apply your knowledge in an interactive project with quizzes.

This course will introduce you to jQuery, a framework for building interactive web pages with animations, visual effects, and advanced functionality. You will start with a brief introduction to the course and jQuery. 

Next, you will explore the core concepts in jQuery, such as event-handling, animations, and in-browser manipulation of the document object model. 

Finally, you will learn about the AJAX framework in jQuery for dynamic content loading in web pages. On top of that, you will be working on an interactive project throughout the course with quizzes and challenges at the end of each chapter.

The Complete Guide to jQuery

Visibility effects dynamically **hide** or **show** certain elements on a webpage. The relevant effects are discussed in detail below. 

## `hide()` effect 

Given a selector, the **`hide()`** effect temporarily hides the set of matched elements from a webpage. 

In the _"Hide Div"_ button event handler below, we hide all the div elements using the `hide()` effect in **line 3**.  

body{
  background-color: #Dbe1f5;
}

div {
  display: table-cell;
  border-style: solid;
  text-align: center;
  padding: 30px;
  font-size: 20;
  border-color: #227C9D;
  background-color: rgb(60, 197, 247);
}
button{
  margin: 5px;
  text-align: center;
}



$(document).ready(function() {
    $("button").click(function() {
        $("div").hide();
    })
});

codemirror

## `show()` effect

Given a selector, the **`show()`** effect displays the hidden elements present in the set of matched elements back on the webpage. 

In the example _"Show Div"_ button event handler below, we display all the hidden div elements using the `show()` effect in **line 7**. 

body{
  background-color: #Dbe1f5;
}

div {
  display: table-cell;
  border-style: solid;
  text-align: center;
  margin: 30px;
  padding: 30px;
  font-size: 20;
  border-color: #227C9D;
  background-color: rgb(60, 197, 247);
}
button{
  margin: 5px;
  text-align: center;
}



$(document).ready(function() {
    $("#hide").click(function() {
        $("div").hide();
    })

    $("#show").click(function() {
        $("div").show();
    })
});

## `toggle()` effect
The **`toggle()`** effect is a combination of `hide()` and `show()` effects. Given a selector, if the matched elements are in a visible state, the `toggle()` effect hides them from the webpage. Similarly, if the matched elements are in a hidden state, the effect displays them back on the webpage. 

Observe this behavior in the example below. In the _"Toggle Div"_ button event handler, we toggle between hiding and revealing `div` elements using the `toggle()` effect in **line 3**. 

<html>
 <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
   </script>
 </head>
 <body>
   <button> Toggle Div </button>
   <div>
      Div  
   </div>  
 </body>
</html>

$(document).ready(function() {
    $("button").click(function() {
        $("div").toggle();
    })
});

## Optional speed parameter
_All jQuery effects_ take an optional speed parameter that controls the duration of the effect. The speed parameter can be set to _"fast,"_ _"slow,"_ or an exact number of _milliseconds_ that specify the effect’s duration.

In the below example, we have multiple buttons with multiple event handlers. Each button has differently specified durations of its `hide()` and `show()` effects. Play around with the web page to visualize the difference in speed.

body{
  background-color: #Dbe1f5;
}

div {
  display: table-cell;
  border-style: solid;
  text-align: center;
  margin: 30px;
  padding: 30px;
  font-size: 20;
  border-color: #227C9D;
  background-color: rgb(60, 197, 247);
}
button{
  margin: 5px;
  text-align: center;
}
span{
  display: block;
}



<html>
 <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
   </script>
 </head>
 <body>
    <span>
   <button id="hideSlow"> Hide Slow </button>
   <button id="hideFast"> Hide Fast </button>
   <button id="hide3s">   Hide in 3 seconds </button>
  </span>
  <span>
   <button id="showSlow"> Show Slow </button>
   <button id="showFast"> Show Fast </button>
   <button id="show3s">   Show in 3 seconds </button>
  </span>
   <div>
      Div  
   </div>
 </body>
</html>

$(document).ready(function() {
    $("#hideSlow").click(function() {
        $("div").hide("slow");
    })
    $("#hideFast").click(function() {
        $("div").hide("fast");
    })
    $("#hide3s").click(function() {
        $("div").hide(3000);
    })
    $("#showSlow").click(function() {
        $("div").show("slow");
    })
    $("#showFast").click(function() {
        $("div").show("fast");
    })
    $("#show3s").click(function() {
        $("div").show(3000);
    })
});

Visibility effects dynamically **hide** or **show** certain elements on a webpage. The relevant effects are discussed in detail below. 

# `hide()` effect 

Given a selector, the **`hide()`** effect temporarily hides the set of matched elements from a webpage. 

In the _"Hide Div"_ button event handler below, we hide all the div elements using the `hide()` effect in **line 3**.  

# `show()` effect

Given a selector, the **`show()`** effect displays the hidden elements present in the set of matched elements back on the webpage. 

In the example _"Show Div"_ button event handler below, we display all the hidden div elements using the `show()` effect in **line 7**. 

# `toggle()` effect
The **`toggle()`** effect is a combination of `hide()` and `show()` effects. Given a selector, if the matched elements are in a visible state, the `toggle()` effect hides them from the webpage. Similarly, if the matched elements are in a hidden state, the effect displays them back on the webpage. 

Observe this behavior in the example below. In the _"Toggle Div"_ button event handler, we toggle between hiding and revealing `div` elements using the `toggle()` effect in **line 3**. 

# Optional speed parameter
_All jQuery effects_ take an optional speed parameter that controls the duration of the effect. The speed parameter can be set to _"fast,"_ _"slow,"_ or an exact number of _milliseconds_ that specify the effect’s duration.

In the below example, we have multiple buttons with multiple event handlers. Each button has differently specified durations of its `hide()` and `show()` effects. Play around with the web page to visualize the difference in speed.

Explore the visibility effects in jQuery such as hide(), show(), and toggle() along with relevant examples. 

jQuery Basics

Events and Event Handlers

DOM Traversal and Manipulation

Effects and Animations

AJAX Methods

Conclusion

Visibility Effects

`hide()` effect

`show()` effect

`toggle()` effect

Optional speed parameter