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

# What is the chaining of effects?

jQuery allows us to chain together different effects for a single selector. The chained effects are placed in a **queue** and executed in that sequence. The syntax for chaining different effects is straightforward and given below:
~~~
$("selector").effectA().effectB().effectC()....effectN()
~~~ 

The `effectA()` takes place first. When `effectA()` concludes, `effectB()` begins its execution, and so on until all the N effects complete their execution.

> 📝 **Note:**
> * Chaining allows us to use a single selector to perform a series of effects instead of continually using the same selector. This significantly reduces the overhead time overhead as the browser does not need to repeatedly look for the same element. 
> * We can also use the `animate()` method within a jQuery chain.

# Example of chaining
In the web page below, we have a `div` element and a `button` element with the text _"Chained effects."_ In the click event handler function of the _"Chained effects,"_ we use chaining to perform a series of effects on the `div` element. The effects `slideUp()`, `slideDown()`, `fadeOut()` and `fadeIn()` execute one after the other when we click on the _"Chained effects"_ button.

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;
}



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

$(document).ready(function() {
    $("button").click(function() {
        $("div")
            .slideUp(3000)
            .slideDown(3000)
            .fadeOut(2000)
            .fadeIn(2000)
    })
});

codemirror

# Pausing the chain

If we want to briefly pause in the _middle_ of a jQuery chain, we can use the jQuery **`delay()`** method. The `delay()` method takes the _time in milliseconds_ as an _argument_ and pauses the chain for the specified period.

For example, in the web page discussed above, we add two breaks of 3 seconds each using the `delay()` method shown below in **line 5** and **line 7**.  

$(document).ready(function() {
    $("button").click(function() {
        $("div")
            .slideUp(3000)
            .delay(3000)
            .slideDown(3000)
            .fadeOut(2000)
            .delay(3000)
            .fadeIn(2000);
    })
});

Explore the concept of chaining in jQuery and its advantages, along with an example. 

jQuery Basics

Events and Event Handlers

DOM Traversal and Manipulation

Effects and Animations

AJAX Methods

Conclusion

Chaining Different Effects