JQuery Examples with demo

Animate():-
--------------- 
To animate any element, such as a simple image:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
  style="position: relative; left: 10px;" />

To animate the opacity, left offset, and height of the image simultaneously:

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

Note that the target value of the height property is 'toggle'. Since the image was visible before, the animation shrinks the height to 0 to hide it. A second click then reverses this transition:

The opacity of the image is already at its target value, so this property is not animated by the second click. Since the target value for left is a relative value, the image moves even farther to the right during this second animation.
Directional properties (top, right, bottom, left) have no discernible effect on elements if their position style property is static, which it is by default.

Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.

Note: if attempting to animate an element with a height or width of 0px, where contents of the element are visible due to overflow, jQuery may clip this overflow during animation. By fixing the dimensions of the original element being hidden however, it is possible to ensure that the animation runs smoothly. A clearfix can be used to automatically fix the dimensions of your main element without the need to set this manually.

Step Function

The second version of .animate() provides a step option — a callback function that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the animation as it is occurring. It accepts two arguments (now and fx), and this is set to the DOM element being animated.

• now: the numeric value of the property being animated at each step
• fx: a reference to the jQuery.fx prototype object, which contains a number of properties such as elem for the animated element, start and end for the first and last value of the animated property, respectively, and prop for the property being animated.

Note that the step function is called for each animated property on each animated element. For example, given two list items, the step function fires four times at each step of the animation:

$('li').animate({
  opacity: .5,
  height: '50%'
},
{
  step: function(now, fx) {
    var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
    $('body').append('<div>' + data + '</div>');
  }
});

Easing

The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

Per-property Easing

As of jQuery version 1.4, you can set per-property easing functions within a single .animate() call. In the first version of .animate(), each property can take an array as its value: The first member of the array is the CSS property and the second member is an easing function. If a per-property easing function is not defined for a particular property, it uses the value of the .animate() method's optional easing argument. If the easing argument is not defined, the default swing function is used.
For example, to simultaneously animate the width and height with the swing easing function and the opacity with the linear easing function:

$('#clickme').click(function() {
  $('#book').animate({
    width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    opacity: 'toggle'
  }, 5000, 'linear', function() {
      $(this).after('<div>Animation complete.</div>');
  });
});

In the second version of .animate(), the options map can include the specialEasing property, which is itself a map of CSS properties and their corresponding easing functions. For example, to simultaneously animate the width using the linear easing function and the height using the easeOutBounce easing function:

$('#clickme').click(function() {
  $('#book').animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
});

As previously noted, a plugin is required for the easeOutBounce function.

Additional Notes:

• All jQuery effects, including .animate(), can be turned off globally by setting jQuery.fx.off = true, which effectively sets the duration to 0. For more information, see jQuery.fx.off.
• Because of the nature of requestAnimationFrame(), you should never queue animations using a setInterval or setTimeout loop. In order to preserve CPU resources, browsers that support requestAnimationFrame will not update animations when the window/tab is not displayed. If you continue to queue animations via setInterval or setTimeout while animation is paused, all of the queued animations will begin playing when the window/tab regains focus. To avoid this potential problem, use the callback of your last animation in the loop, or append a function to the elements .queue() to set the timeout to start the next animation.

Examples:

Example: Click the button to animate the div with a number of different properties.

<!DOCTYPE html>
<html>
<head>
  <style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="go">&raquo; Run</button>
<div id="block">Hello!</div>
<script>
/* Using multiple unit types within one animation. */

$("#go").click(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});
</script>
</body>
</html>

Demo:

Example: Animates a div's left property with a relative value. Click several times on the buttons to see the relative animations queued up.

<!DOCTYPE html>
<html>
<head>
  <style>
div {
  position:absolute;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="left">&laquo;</button> <button id="right">&raquo;</button>
<div class="block"></div>
<script>
$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "slow");
});

$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});
</script>
</body>
</html>

Demo:

Example: The first button shows how an unqueued animation works. It expands the div out to 90% width while the font-size is increasing. Once the font-size change is complete, the border animation will begin. The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.

<!DOCTYPE html>
<html>
<head>
  <style>
div {
  background-color:#bca;
  width:200px;
  height:1.1em;
  text-align:center;
  border:2px solid green;
  margin:3px;
  font-size:14px;
}
button {
  font-size:14px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="go1">&raquo; Animate Block1</button>
<button id="go2">&raquo; Animate Block2</button>
<button id="go3">&raquo; Animate Both</button>
<button id="go4">&raquo; Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
<script>

$( "#go1" ).click(function(){
  $( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
     .animate({ fontSize: "24px" }, 1500 )
     .animate({ borderRightWidth: "15px" }, 1500 );
});

$( "#go2" ).click(function(){
  $( "#block2" ).animate({ width: "90%" }, 1000 )
     .animate({ fontSize: "24px" }, 1000 )
     .animate({ borderLeftWidth: "15px" }, 1000 );
});

$( "#go3" ).click(function(){
  $( "#go1" ).add( "#go2" ).click();
});

$( "#go4" ).click(function(){
  $( "div" ).css({ width: "", fontSize: "", borderWidth: "" });
});
</script>
</body>
</html>

Demo:

Example: Animates the first div's left property and synchronizes the remaining divs, using the step function to set their left properties at each stage of the animation.

<!DOCTYPE html>
<html>
<head>
  <style>
div {
   position: relative;
   background-color: #abc;
   width: 40px;
   height: 40px;
   float: left;
   margin: 5px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><button id="go">Run »</button></p>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<script>
$( "#go" ).click(function(){
  $( ".block:first" ).animate({
    left: 100
  }, {
    duration: 1000,
    step: function( now, fx ){
      $( ".block:gt(0)" ).css( "left", now );
    }
  });
});
</script>
</body>
</html>

Demo:

Example: Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

$( "p" ).animate({
  "height": "toggle", "opacity": "toggle"
}, "slow" );

Example: Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.

$( "p" ).animate({
  "left": "50", "opacity": 1
}, 500 );

Example: An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function. Note, this code will do nothing unless the paragraph element is hidden.

$( "p" ).animate({
  "opacity": "show"
}, "slow", "easein" );

Example: Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

$( "p" ).animate({
  "height": "toggle", "opacity": "toggle"
}, { duration: "slow" });

Example: Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds. It also will do it outside the queue, meaning it will automatically start without waiting for its turn.

$( "p" ).animate({
  left: "50px", opacity: 1
}, { duration: 500, queue: false });

Example: An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function.

$( "p" ).animate({
  "opacity": "show"
}, { "duration": "slow", "easing": "easein" });

Example: An example of using a callback function. The first argument is an array of CSS properties, the second specifies that the animation should take 1000 milliseconds to complete, the third states the easing type, and the fourth argument is an anonymous callback function.

$( "p" ).animate({
  height:200, width:400, opacity: .5
}, 1000, "linear", function(){ alert("all done"); });

Thanks

shibashish mohanty 

.clearQueue():-

.clearQueue( [queueName] )

queueNameA string containing the name of the queue. Defaults to fx, the standard effects queue.

When the .clearQueue() method is called, all functions on the queue that have not been executed are removed from the queue. When used without an argument, .clearQueue() removes the remaining functions from fx, the standard effects queue. In this way it is similar to .stop(true). However, while the .stop() method is meant to be used only with animations, .clearQueue() can also be used to remove any function that has been added to a generic jQuery queue with the .queue() method.

Example:

Empty the queue.

<!DOCTYPE html>
<html>
<head>
  <style>
div { margin:3px; width:40px; height:40px;
    position:absolute; left:0px; top:30px; 
    background:green; display:none; }
div.newcolor { background:blue; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>
$("#start").click(function () {
    
  var myDiv = $("div");
  myDiv.show("slow");
  myDiv.animate({left:'+=200'},5000);
  myDiv.queue(function () {
    var _this = $(this);
    _this.addClass("newcolor");
    _this.dequeue();
  });

  myDiv.animate({left:'-=200'},1500);
  myDiv.queue(function () {
    var _this = $(this);
    _this.removeClass("newcolor");
    _this.dequeue();
  });
  myDiv.slideUp();
  });

$("#stop").click(function () {
  var myDiv = $("div");
  myDiv.clearQueue();
  myDiv.stop();
});</script>
</body>
</html>

.delay():-

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Example:

Animate the hiding and showing of two divs, delaying the first before showing it.

<!DOCTYPE html>
<html>
<head>
  <style>
div { position: absolute; width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; left: 0;}
.second { background-color: #33f; left: 80px;}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
        <script>
    $("button").click(function() {
      $("div.first").slideUp(300).delay(800).fadeIn(400);
      $("div.second").slideUp(300).fadeIn(400);
    });
</script>
</body>
</html>

.dequeue():-

.dequeue( [queueName] )

queueNameA string containing the name of the queue. Defaults to fx, the standard effects queue.

When .dequeue() is called, the next function on the queue is removed from the queue, and then executed. This function should in turn (directly or indirectly) cause .dequeue() to be called, so that the sequence can continue.

Example:

Use dequeue to end a custom queue function which allows the queue to keep going.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { margin:3px; width:50px; position:absolute;
  height:50px; left:10px; top:30px; 
  background-color:yellow; }
  div.red { background-color:red; }  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Start</button>  <div></div>
<script>
$("button").click(function () {
  $("div").animate({left:'+=200px'}, 2000);
  $("div").animate({top:'0px'}, 600);
  $("div").queue(function () {
    $(this).toggleClass("red");
    $(this).dequeue();
  });
  $("div").animate({left:'10px', top:'30px'}, 700);
});
</script>
</body>
</html>

.fadeIn():-

The .fadeIn() method animates the opacity of the matched elements.
Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.
We can animate any element, such as a simple image:

<div id="clickme">
      Click here
    </div>
    <img id="book" src="book.png" alt="" width="100" height="123" />
    With the element initially hidden, we can show it slowly:
    $('#clickme').click(function() {
      $('#book').fadeIn('slow', function() {
        // Animation complete
      });
    });

 

Examples:

Example: Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.

<!DOCTYPE html>
<html>
<head>
  <style>
    span { color:red; cursor:pointer; }
    div { margin:3px; width:80px; display:none;
      height:80px; float:left; }
      div#one { background:#f00; }
      div#two { background:#0f0; }
      div#three { background:#00f; }
    </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <span>Click here...</span>

    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
<script>
      $(document.body).click(function () {
        $("div:hidden:first").fadeIn("slow");
      });
    </script>
</body>
</html>

.fadeOut():-

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.
Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.
We can animate any element, such as a simple image:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

With the element initially shown, we can hide it slowly:

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

 

Examples:

Example: Animates all paragraphs to fade out, completing the animation within 600 milliseconds.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { font-size:150%; cursor:pointer; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>
  If you click on this paragraph
  you'll see it just fade away.
  </p>
<script>
  $("p").click(function () {
  $("p").fadeOut("slow");
  });
  </script>
</body>
</html>

Demo:

Example: Fades out spans in one section that you click on.

<!DOCTYPE html>
<html>
<head>
  <style>
  span { cursor:pointer; }
  span.hilite { background:yellow; }
  div { display:inline; color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <h3>Find the modifiers - <div></div></h3>
  <p>
  If you <span>really</span> want to go outside
  <span>in the cold</span> then make sure to wear
  your <span>warm</span> jacket given to you by
  your <span>favorite</span> teacher.
  </p>
<script>

  $("span").click(function () {
  $(this).fadeOut(1000, function () {
  $("div").text("'" + $(this).text() + "' has faded!");
  $(this).remove();
  });
  });
  $("span").hover(function () {
  $(this).addClass("hilite");
  }, function () {
  $(this).removeClass("hilite");
  });

  </script>
</body>
</html>

Demo:

Example: Fades out two divs, one with a "linear" easing and one with the default, "swing," easing.

<!DOCTYPE html>
<html>
<head>
  <style>
.box,
button { float:left; margin:5px 10px 5px 0; }
.box { height:80px; width:80px; background:#090; }
#log { clear:left; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="btn1">fade out</button>
<button id="btn2">show</button>
<div id="log"></div>
<div id="box1" class="box">linear</div>
<div id="box2" class="box">swing</div>
<script>
$("#btn1").click(function() {
  function complete() {
    $("<div/>").text(this.id).appendTo("#log");
  }
  
  $("#box1").fadeOut(1600, "linear", complete);
  $("#box2").fadeOut(1600, complete);
});

$("#btn2").click(function() {
  $("div").show();
  $("#log").empty();
});
</script>
</body>
</html>

.fadeTo():-

The .fadeTo() method animates the opacity of the matched elements.
Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, the default duration of 400 milliseconds is used. Unlike the other effect methods, .fadeTo() requires that duration be explicitly specified.
If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.
We can animate any element, such as a simple image:

<div id="clickme">
    Click here
  </div>
  <img id="book" src="book.png" alt="" width="100" height="123" />
  With the element initially shown, we can dim it slowly:
  $('#clickme').click(function() {
    $('#book').fadeTo('slow', 0.5, function() {
      // Animation complete.
    });
  });
  

 

Examples:

Example: Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>
Click this paragraph to see it fade.</p>
<p>
Compare to this one that won't fade.</p>
<script>
$("p:first").click(function () {
$(this).fadeTo("slow", 0.33);
});
</script>
</body>
</html>

Demo:

Example: Fade div to a random opacity on each click, completing the animation within 200 milliseconds.

<!DOCTYPE html>
<html>
<head>
  <style>
p { width:80px; margin:0; padding:5px; }
div { width:40px; height:40px; position:absolute; }
div#one { top:0; left:0; background:#f00; }
div#two { top:20px; left:20px; background:#0f0; }
div#three { top:40px; left:40px; background:#00f; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>And this is the library that John built...</p>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<script>
$("div").click(function () {
$(this).fadeTo("fast", Math.random());
});
</script>
</body>
</html>

Demo:

Example: Find the right answer! The fade will take 250 milliseconds and change various styles when it completes.

<!DOCTYPE html>
<html>
<head>
  <style>
div, p { width:80px; height:40px; top:0; margin:0; 
position:absolute; padding-top:8px; }
p { background:#fcc; text-align:center; }
div { background:blue; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Wrong</p>
<div></div>
<p>Wrong</p>
<div></div>
<p>Right!</p>
<div></div>
<script>
var getPos = function (n) {
return (Math.floor(n) * 90) + "px";
};
$("p").each(function (n) {
var r = Math.floor(Math.random() * 3);
var tmp = $(this).text();
$(this).text($("p:eq(" + r + ")").text());
$("p:eq(" + r + ")").text(tmp);
$(this).css("left", getPos(n));
});
$("div").each(function (n) {
      $(this).css("left", getPos(n));
    })
.css("cursor", "pointer")
.click(function () {
      $(this).fadeTo(250, 0.25, function () {
            $(this).css("cursor", "")
                   .prev().css({"font-weight": "bolder",
                                "font-style": "italic"});
          });
    });
</script>
</body>
</html>

.fadeToggle():-

Example:

Fades first paragraph in or out, completing the animation within 600 milliseconds and using a linear easing. Fades last paragraph in or out for 200 milliseconds, inserting a "finished" message upon completion.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>fadeToggle p1</button>
<button>fadeToggle p2</button>
<p>This paragraph has a slow, linear fade.</p>
<p>This paragraph has a fast animation.</p>
<div id="log"></div>
<script>
$("button:first").click(function() {
  $("p:first").fadeToggle("slow", "linear");
});
$("button:last").click(function () {
  $("p:last").fadeToggle("fast", function () {
    $("#log").append("<div>finished</div>");
  });
});
</script>
</body>
</html>

jQuery.fx.interval:-

Note:jQuery.fx.interval currently has no effect in browsers that support the requestAnimationFrame property, such as Google Chrome 11. This behavior is subject to change in a future release.

Example:

Cause all animations to run with less frames.

<!DOCTYPE html>
<html>
<head>
  <style>
    div { width:50px; height:30px; margin:5px; float:left;
          background:green; }
    </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><input type="button" value="Run"/></p>
<div></div>
<script>
jQuery.fx.interval = 100;

$("input").click(function(){
  $("div").toggle( 3000 );
});
  </script>
</body>
</html>

jQuery.fx.off:-

Animations can be turned back on by setting the property to false.

Example:

Toggle animation on and off

<!DOCTYPE html>
<html>
<head>
  <style>
    div { width:50px; height:30px; margin:5px; float:left;
          background:green; }
    </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><input type="button" value="Run"/> <button>Toggle fx</button></p>
<div></div>
<script>
var toggleFx = function() {
  $.fx.off = !$.fx.off;
};
toggleFx();

$("button").click(toggleFx)

$("input").click(function(){
  $("div").toggle("slow");
});
  </script>
</body>
</html>

.hide():-

We can animate any element, such as a simple image:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
With the element initially shown, we can hide it slowly:
$('#clickme').click(function() {
  $('#book').hide('slow', function() {
    alert('Animation complete.');
  });
});

 

Examples:

Example: Hides all paragraphs then the link on click.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Hello</p>
  <a href="#">Click to hide me too</a>
  <p>Here is another paragraph</p>
<script>

    $("p").hide();
    $("a").click(function ( event ) {
      event.preventDefault();
      $(this).hide();
    });
</script>
</body>
</html>

Demo:

Example: Animates all shown paragraphs to hide slowly, completing the animation within 600 milliseconds.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:#dad; font-weight:bold; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Hide 'em</button>

  <p>Hiya</p>
  <p>Such interesting text, eh?</p>
<script>
    $("button").click(function () {
      $("p").hide("slow");
    });    </script>
</body>
</html>

Demo:

Example: Animates all spans (words in this case) to hide fastly, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.

<!DOCTYPE html>
<html>
<head>
  <style>
  span { background:#def3ca; padding:3px; float:left; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="hidr">Hide</button>
  <button id="showr">Show</button>
  <div>

    <span>Once</span> <span>upon</span> <span>a</span> 
    <span>time</span> <span>there</span> <span>were</span> 
    <span>three</span> <span>programmers...</span>

  </div>
<script>
    $("#hidr").click(function () {
      $("span:last-child").hide("fast", function () {
        // use callee so don't have to name the function
        $(this).prev().hide("fast", arguments.callee); 
      });
    });
    $("#showr").click(function () {
      $("span").show(2000);
    });
</script>
</body>
</html>

Demo:

Example: Hides the divs when clicked over 2 seconds, then removes the div element when its hidden. Try clicking on more than one box at a time.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background:#ece023; width:30px; 
        height:40px; margin:2px; float:left; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
<script>
    for (var i = 0; i < 5; i++) {
      $("<div>").appendTo(document.body);
    }
    $("div").click(function () {
      $(this).hide(2000, function () {
        $(this).remove();
      });
    });
</script>
</body>
</html>

.queue():-

.queue( [queueName] )

queueNameA string containing the name of the queue. Defaults to fx, the standard effects queue.

Example:

Show the length of the queue.

<!DOCTYPE html>
<html>
<head>
  <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="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
  <p>The queue length is: <span></span></p>
  <div></div>
<script>
var div = $("div");
function runIt() {
  div.show("slow");
  div.animate({left:'+=200'},2000);
  div.slideToggle(1000);
  div.slideToggle("fast");
  div.animate({left:'-=200'},1500);
  div.hide("slow");
  div.show(1200);
  div.slideUp("normal", runIt);
}
function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}

runIt();
showIt();
</script>
</body>
</html>

This feature is similar to providing a callback function with an animation method, but does not require the callback to be given at the time the animation is performed.
$('#foo').slideUp(); $('#foo').queue(function() { alert('Animation complete.'); $(this).dequeue(); }); This is equivalent to:
$('#foo').slideUp(function() { alert('Animation complete.'); }); Note that when adding a function with .queue(), we should ensure that .dequeue() is eventually called so that the next function in line executes.
In jQuery 1.4 the function that's called is passed in another function, as the first argument, that when called automatically dequeues the next item and keeps the queue moving. You would use it like so:
$("#test").queue(function(next) { // Do some stuff... next(); });

Examples:

Example: Queue a custom function.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px; 
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  Click here...
  <div></div>
<script>$(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });</script>
</body>
</html>

Demo:

Example: Set a queue array to delete the queue.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>
<script>$("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},1500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      $("div").queue("fx", []);
      $("div").stop();
    });</script>
</body>
</html>

.show():-

Examples:

Example: Animates all hidden paragraphs to show slowly, completing the animation within 600 milliseconds.

<!DOCTYPE html>
<html>
<head>
  <style>
      p { background:yellow; }
      </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Show it</button>

      <p style="display: none">Hello  2</p>
<script>
    $("button").click(function () {
    $("p").show("slow");
    });
    </script>
</body>
</html>

Demo:

Example: Animates all hidden divs to show fastly in order, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background:#def3ca; margin:3px; width:80px; 
  display:none; float:left; text-align:center; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
  <button id="showr">Show</button>
  <button id="hidr">Hide</button>
  <div>Hello 3,</div>

  <div>how</div>
  <div>are</div>
  <div>you?</div>
<script>
$("#showr").click(function () {
  $("div:eq(0)").show("fast", function () {
    /* use callee so don't have to name the function */
    $(this).next("div").show("fast", arguments.callee);
  });
});
$("#hidr").click(function () {
  $("div").hide(2000);
});
</script>
</body>
</html>

Demo:

Example: Shows all span and input elements with an animation. Once the animation is done, it changes the text.

<!DOCTYPE html>
<html>
<head>
  <style>
  span { display:none; }
  div { display:none; }
  p { font-weight:bold; background-color:#fcd; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Do it!</button>
  <span>Are you sure? (type 'yes' if you are) </span>
  <div>
    <form>
      <input type="text"  value="as;ldkfjalsdf"/>
    </form>
  </div>
  <p style="display:none;">I'm hidden...</p>
  <script>
function doIt() {
  $("span,div").show("slow");
}
/* can pass in function name */
$("button").click(doIt);

$("form").submit(function () {
  if ($("input").val() == "yes") {
    $("p").show(4000, function () {
      $(this).text("Ok, DONE! (now showing)");
    });
  }
  $("span,div").hide("fast");
  /* to stop the submit */
  return false; });
</script>
</body>
</html>

.slideDown():-

Examples:

Example: Animates all divs to slide down and show themselves over 600 milliseconds.

<!DOCTYPE html>
<html>
<head>
  <style>
div { background:#de9a44; margin:3px; width:80px; 
height:40px; display:none; float:left; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  Click me!<div></div>
<div></div>
<div></div>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
</script>
</body>
</html>

Demo:

Example: Animates all inputs to slide down, completing the animation within 1000 milliseconds. Once the animation is done, the input look is changed especially if it is the middle input which gets the focus.

<!DOCTYPE html>
<html>
<head>
  <style>
div { background:#cfd; margin:3px; width:50px; 
text-align:center; float:left; cursor:pointer;
border:2px outset black; font-weight:bolder; }
input { display:none; width:120px; float:left; 
margin:10px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>Push!</div>
<input type="text" />
<input type="text" class="middle" />
<input type="text" />
<script>
$("div").click(function () {
$(this).css({ borderStyle:"inset", cursor:"wait" });
$("input").slideDown(1000,function(){
$(this).css("border", "2px red inset")
.filter(".middle")
 .css("background", "yellow")
 .focus();
$("div").css("visibility", "hidden");
});
});
</script>
</body>
</html>

.slideToggle():-

We can animate any element, such as a simple image:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

We will cause .slideToggle() to be called when another element is clicked:

$('#clickme').click(function() {
  $('#book').slideToggle('slow', function() {
    // Animation complete.
  });
});

With the element initially shown, we can hide it slowly with the first click:

A second click will show the element once again:

 

Examples:

Example: Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { width:400px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Toggle</button>

  <p>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>
<script>
    $("button").click(function () {
      $("p").slideToggle("slow");
    });
</script>
</body>
</html>

Demo:

Example: Animates divs between dividers with a toggle that makes some appear and some disappear.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background:#b977d1; margin:3px; width:60px; 
        height:60px; float:left; }
  div.still { background:#345; width:5px; }
  div.hider { display:none; }
  span { color:red; }
  p { clear: left; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
<div class="still"></div>
<div style="display:none;">
</div><div class="still"></div>
<div></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div></div>
<p><button id="aa">Toggle</button> There have been <span>0</span> toggled divs.</p>
<script>
  $("#aa").click(function () {
    $("div:not(.still)").slideToggle("slow", function () {
      var n = parseInt($("span").text(), 10);
      $("span").text(n + 1);
    });
  });
</script>
</body>
</html>

.slideUp():-

We can animate any element, such as a simple image:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

With the element initially shown, we can hide it slowly:

$('#clickme').click(function() {
  $('#book').slideUp('slow', function() {
    // Animation complete.
  });
});
  

 

Examples:

Example: Animates all divs to slide up, completing the animation within 400 milliseconds.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background:#3d9a44; margin:3px; width:80px; 
    height:40px; float:left; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  Click me!
  <div></div>
  <div></div>
  <div></div>
  <div></div>

  <div></div>
<script>
  $(document.body).click(function () {
    if ($("div:first").is(":hidden")) {
      $("div").show("slow");
    } else {
      $("div").slideUp();
    }
  });

  </script>
</body>
</html>

Demo:

Example: Animates the parent paragraph to slide up, completing the animation within 200 milliseconds. Once the animation is done, it displays an alert.

<!DOCTYPE html>
<html>
<head>
  <style>
 div { margin:2px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
  <button>Hide One</button>
  <input type="text" value="One" />
</div>
<div>
  <button>Hide Two</button>
  <input type="text" value="Two" />
</div>
<div>
  <button>Hide Three</button>
  <input type="text" value="Three" />
</div>
<div id="msg"></div>
<script>
  $("button").click(function () {
    $(this).parent().slideUp("slow", function () {
      $("#msg").text($("button", this).text() + " has completed.");
    });
  });
</script>
</body>
</html>

.stop():-

The usefulness of the .stop() method is evident when we need to animate an element on mouseenter and mouseleave:

<div id="hoverme">
  Hover me
  <img id="hoverme" src="book.png" alt="" width="100" height="123" />
</div>

We can create a nice fade effect without the common problem of multiple queued animations by adding .stop(true, true) to the chain:

$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});

Toggling Animations

As of jQuery 1.7, stopping a toggled animation prematurely with .stop() will trigger jQuery's internal effects tracking. In previous versions, calling the .stop() method before a toggled animation was completed would cause the animation to lose track of its state (if jumpToEnd was false). Any subsequent animations would start at a new "half-way" state, sometimes resulting in the element disappearing. To observe the new behavior, see the final example below.

Animations may be stopped globally by setting the property $.fx.off to true. When this is done, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.

Examples:

Example: Click the Go button once to start the animation, then click the STOP button to stop it where it's currently positioned. Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.

<!DOCTYPE html>
<html>
<head>
  <style>div { 
position: absolute; 
background-color: #abc;
left: 0px;
top:30px;
width: 60px; 
height: 60px;
margin: 5px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="go">Go</button> <button id="stop">STOP!</button>
<button id="back">Back</button>
<div class="block"></div>
<script>
/* Start animation */
$("#go").click(function(){
$(".block").animate({left: '+=100px'}, 2000);
});
/* Stop animation when button is clicked */
$("#stop").click(function(){
$(".block").stop();
});
/* Start animation in the opposite direction */
$("#back").click(function(){
$(".block").animate({left: '-=100px'}, 2000);
});
</script>
</body>
</html>

Demo:

Example: Click the slideToggle button to start the animation, then click again before the animation is completed. The animation will toggle the other direction from the saved starting point.

<!DOCTYPE html>
<html>
<head>
  <style>.block { 
background-color: #abc;
border: 2px solid black;
width: 200px; 
height: 80px;
margin: 10px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="toggle">slideToggle</button> <div class="block"></div>
<script>
var $block = $('.block');
/* Toggle a sliding animation animation */
$('#toggle').on('click', function() {
    $block.stop().slideToggle(1000);
});
</script>
</body>
</html>

.toggle():-

We can animate any element, such as a simple image:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

We will cause .toggle() to be called when another element is clicked:

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
  });
});

With the element initially shown, we can hide it slowly with the first click:

A second click will show the element once again:

The second version of the method accepts a Boolean parameter. If this parameter is true, then the matched elements are shown; if false, the elements are hidden. In essence, the statement:

$('#foo').toggle(showOrHide);

is equivalent to:

if ( showOrHide == true ) {
  $('#foo').show();
} else if ( showOrHide == false ) {
  $('#foo').hide();
}

Additional Notes:

• All jQuery effects, including .toggle(), can be turned off globally by setting jQuery.fx.off = true, which effectively sets the duration to 0. For more information, see jQuery.fx.off.

Examples:

Example: Toggles all paragraphs.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>

$("button").click(function () {
$("p").toggle();
});
</script>
</body>
</html>

Demo:

Example: Animates all paragraphs to be shown if they are hidden and hidden if they are visible, completing the animation within 600 milliseconds.

<!DOCTYPE html>
<html>
<head>
  <style>
p { background:#dad;
font-weight:bold;
font-size:16px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$("button").click(function () {
$("p").toggle("slow");
});    </script>
</body>
</html>

Demo:

Example: Shows all paragraphs, then hides them all, back and forth.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
var flip = 0;
$("button").click(function () {
$("p").toggle( flip++ % 2 == 0 );
});
</script>
</body>
</html>

This is the magic of jquery, thanks for visiting

Shibashish mohanty