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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 155
    Comment on it

    Queue() method is used in jQuery to returns a number of animations to be performed on the elements in the jQuery object. This method is used for the continuous looping of a jquery element. It returns the effect which is used in the queue. While queue(function) is used for adding another function to the end of the queue. This is the foundation for all animations in jQuery it allows series of function execution some methods which is used in this blog for the series of a  transition. slideUp(), .slideDown(), .fadeIn(), and .fadeOut() all use .animate().

    Source code:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>queue demo</title>
      <style>
      div {
        margin: 3px;
        width: 40px;
        height: 40px;
        position: absolute;
        left: 0px;
        top: 60px;
        background: green;
        display: none;
      }
      div.newcolor {
        background: blue;
      }
      p {
        color: red;
      }
      </style>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
     
    <p>The queue length is: <span></span></p>
    <div></div>
     
    <script>
    var div = $( "div" );
     
    function runIt() {
      div
        .show( "slow" )
        .animate({ left: "+=200" }, 2000 )
        .slideToggle( 1000 )
        .slideToggle( "fast" )
        .animate({ left: "-=200" }, 1500 )
        .hide( "slow" )
        .show( 1200 )
        .slideUp( "normal", runIt );
    }
     
    function showIt() {
      var n = div.queue( " " );
      $( "span" ).text( n.length );
      setTimeout( showIt, 100 );
    }
     
    runIt();
    showIt();
    </script>
     
    </body>
    </html>

    Note:  This function is used fro the time count

    var n = div.queue( "fx" );

 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: