Chaining multiple jQuery effects

Jquery Course

Chaining Actions

You can run multiple jQuery commands, one after the other, on the same element(s). This is called "chaining".
To chain an effect (or action) you simply append it to the previous action.
    For example, the first <h3> tag quickly hides and then slides into view, before fading away: You can chain together as many actions as you like.

Example. When click on a button, chain together the slideDown(), animate() (width and fontSize), and another animate() (marginLeft, to move the object), and then hides the button with slideUp().

<style type="text/css"><!--
#dv1 { display:none; width:150px; height:90px; background:#dadefe; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when click on a button with id="btn", chain multiple actions
  // to an element with id="dv1": slideDown(), animate(), and animate()
  // then hides the button with slideUp()
  $('#btn').click(function() {
    $('#dv1')
      .slideDown('slow')
      .animate({ 'width':'250px', 'fontSize':'20px' }, 1800)
      .animate({ 'marginLeft':'+=100' }, 'slow', function() {
        $('#btn').slideUp(800);
      });
  });
});
--></script>

<div id="dv1">coursesweb.net</div>
<button id="btn">Click</button>

Demo:

Pausing the Chain

If you want to pause briefly in the middle of a jQuery chain, you can use the delay() method. It takes one argument that indicates the number of milliseconds to delay.
Example. Show an element with slideDown(), display it for 2 seconds, hide it with slideUp(), then hide the button too (with fadeOut()):

<style type="text/css"><!--
#dv1 { display:none; width:150px; height:90px; background:#deeffe; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when click on a button with id="btn", chain multiple actions to a tag with id="dv1"
  // delay 2 seconds then hides the DIV and the button
  $('#btn').click(function() {
    $('#dv1')
      .slideDown('slow')
      .animate({ 'width':'280px', 'fontSize':'18px' }, 1500)
      .delay(2000)
      .slideUp(600, function() {
        $('#btn').fadeOut('slow');
      });
  });
});
--></script>

<div id="dv1">You have two seconds to read this :)<br />
Have a good life</div>
<button id="btn">Click</button>

Demo:

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

#id {
  overflow: auto;
}

document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}

if(isset($_GET["id"])) {
  echo $_GET["id"];
}