Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Queue Functionality In jQuery animate()

    @akhil.pandey
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 333
    Comment on it

    If we want to create custom animation than for this purpose jquery animation is used.

    jquery animation method syntax is below:-

    Syntax :-

    1. $(part to be selected).animate({parameters},speed,callback);

     

    Queue functionality of jquery animate() method

    jquery contains queue functionality by default. i.e if we write animate() calls one after other, jquery will create internal queue for these calls and then run these calls one after other. 

    so if we want to run different animation one after other than this functionality of jquery animate() method is very helpful.

    For using this functionality first we have to include below script into our head tag  :-

    1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

    below is the html code  :-

    1. <button>Click here to animate text</button>
    2.  
    3. <p>We can give any information here about the animate effect.</p>
    4.  
    5. <div> This div get animate</div>

     

    below is the css for above code:-

    1.        div{
    2.              background-color:#7D7D7D;
    3.              height:100px;
    4.              width:100px;
    5.              color:#fff;
    6.             }

     

    below is jquery code for above html:-

    1. <script> 
    2. $(document).ready(function(){
    3.     $("button").click(function(){
    4.         var p = $("div");
    5.         p.animate({height: '400px', opacity: '0.6'}, "fast");
    6.         p.animate({width: '400px', opacity: '0.9'}, "fast");
    7.         p.animate({height: '200px', opacity: '0.6'}, "fast");
    8.         p.animate({width: '200px', opacity: '0.9'}, "slow");
    9.     });
    10. });
    11. </script>
    12.  

    below is jquery fiddle link where i have run above code:-

    https://jsfiddle.net/yev8LcLw/17/

    JQuery Javascript
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: