JQuery Chaining Functions

In the last article, we saw how call back functions execute after the completion of different JQuery effects. There is another way of executing a function once another function has completed its execution. This is done via JQuery chaining. Chaining allows developers to chain multiple JQuery functions in a single line of code. The functions that come first in the chain execute first and those who come later execute later. Chaining follows principle of FIFO. Following example demonstrates the process of JQuery chaining.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Chaining</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("button").click(function(){
           $('.testdiv').fadeIn(2000).css("color", "red").animate({left:'250px'},1000).slideUp(1000);
        
            
         });
           
         });
      </script>
    <style>
       
        .testdiv{
            display: none;
            position: absolute;
            font-size: 1.5em;
        }
        
    </style>
</head>
    
<body>
    
    <button>Click to see chaining effect.</button>
    <div class="testdiv"> This is a div</div>
  
    
</body>

</html>

Download Code
Run Code

The above webpage contains a button and a div element with some text. When the button is clicked an event is fired. JQuery click event handler handles this event. A function executes within the event handler which selects the div and execute multiple chained functions on this div. When you click the button you shall see text fades in, then this text moves 250px towards right and then it slides up. This is because the fadeIn, css, animate and slideUp functions are chained together.

Let’s take another example of JQuery chaining. In this example, we shall move the blue ball up and down twice by chaining the animate functions four times. Have a look at it.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Chaining</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $('button').click(function(){
           $('.circle').
           animate(
               {top: '400px'},2000
           ). animate(
               {top: '-150px'},2000
           ). animate(
               {top: '400px'},2000
           ). animate(
               {top: '-150px'},2000
           );
              
         });
           
         });
      </script>
    <style>
        
    
        .circle{
            background-color: cornflowerblue;

           width: 200px;
            height: 200px;
            border-radius: 100%;
            position: absolute;
            margin: 0 auto;
            left: 50%;
            margin-top: 20px;
            margin-left: -100px;

    
        }
    </style>
</head>
    
<body>
    
    <div style="text-align:center">
    <button>Move Circle</button>
    <div class="circle"></div>
    </div>
    
    
</body>

</html>

Run Code
Download Code

The above html page contains a button and a circle. When a user clicks the button an event fires which is handled by JQuery click event handler. Inside the event handler, animate function is called 4 times in the form of chain. This produces a bounce effect on the blue circle.

<<< JQuery Callback FunctionsJQuery Get Functions >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .