Jquery Queue Feature Use Demo -Tutorial Savvy

JQUERY provides QUEUE facility to line up functions for a DOM element.It’s main purpose to maintain a series of functions applied to a element.
Benefits of Queue:-

   —— Provides dynamic addition of function to a Queue.
   ——-Provides dynamic removal of function to a Queue.
                   ——-Does not hamper the main program execution as It operates Asynchronously.

In this Demo, “We will create a queue(seriese of functions) and apply to a DIV DOM element.Also we will create another dynamic queue”.
The markup HTML is present in jqplot-demo.html,

<html>
 <head>
  <title>JQUERY Queue Use Demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="queue-jquery-script.js"></script>
 </head>
 
 <body>
  <div id="tutorialsavvy">TutorialSavvy</div>
 </body>
</html>

The javascript code is present in queue-jquery-script.js,

var TUTORIAL_SAVVY={
  
   /*Counter for calculate the no of execution*/
   COUNT :0,
   
   /*Seriese of functions to be execxuted*/
      animateTutorialSavvy : function(){
 
       var nodeElement = $("#tutorialsavvy");
       
       $(nodeElement).animate({"font-size":+30},2000);
       console.log(TUTORIAL_SAVVY.calculateNoofQueue());
       
       $(nodeElement).hide();
       console.log(TUTORIAL_SAVVY.calculateNoofQueue());
       
  $(nodeElement).show();
  console.log(TUTORIAL_SAVVY.calculateNoofQueue());
  
  $(nodeElement).slideUp("normal");
  
  $(nodeElement).slideDown("normal",TUTORIAL_SAVVY.animateTutorialSavvy);
  console.log(TUTORIAL_SAVVY.calculateNoofQueue());
  
  TUTORIAL_SAVVY.COUNT++;
  
  console.log(TUTORIAL_SAVVY.COUNT === 3);
  
  /*Chehcks the count if 3, it stops the previous queue and creates new One*/
  if(TUTORIAL_SAVVY.COUNT === 3){
   
   $.queue( $("#tutorialsavvy")[0], "fx", [] );
   
   $("#tutorialsavvy").stop();
   
   TUTORIAL_SAVVY.createAnewQueue();
  }
   },
   /*Creates a new Queue for the element*/
   createAnewQueue : function(){
    
      $.queue( $("#tutorialsavvy")[0], "fx", function () {
       
        $(this).css("color", 'red');
         
        $.dequeue( this );
      });
   },
   /*Calculates the Queue lenght a present point of time*/
   calculateNoofQueue : function(){
 
    var noofQueue = $.queue( $("#tutorialsavvy")[0], "fx");
    
    return "Queue Length :"+noofQueue.length;
   }
};

$(document).ready(function(){
  
 TUTORIAL_SAVVY.animateTutorialSavvy($("#tutorialsavvy"));
});

The firebug debug console output,

The Browser output will look like,

Jun 15, 2013Sandeep

Jquery Queue Feature Use Demo

Related

Sandeep