Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • jQuery queue() Method

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 133
    Comment on it

    queue() Method:

    Queue method is used to display the queue of functions waiting to be get executed on selected html element. In a queue there can be one or more functions waiting to execute on selected html element. We can also manipulate the queue of functions to be executed on the selected html element.

    Syntax:

    $(selector).queue(queueName)

    Example:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Queue Function in jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $(".start").click(function(){
            var div = $("div");
            div.animate({height: 300}, "slow");
            div.animate({width: 300}, "medium");
            div.animate({height: 80}, "slow");
            div.animate({width: 100}, "slow");
    
            $("span").text(div.queue().length);   
        });
    });
    </script>
    
    </head>
    <body>
    
    <button class="start" style="backgound:grey;border:1px solid #333 ;border-radius:7px;padding:8px;">Start Animation</button>
    
    <p>Queue length is: <span></span></p>
    
    <div style="width:50px;height:50px;position:absolute;left:10px;top:100px;background-color:beige;border:1px solid grey;"></div>
    
    
    </body>
    </html>

    In the above example we are performing multiple effects on div by using animate method when the user will click on start animation button.

    Working Demo: https://jsfiddle.net/cff48c2z/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: