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:
$('h3:first').hide().slideDown('slow').fadeOut();
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:

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which type of <input> creates a color well control for selecting a color value?
type="text" type="color" type="date"
<input type="color" name="get_color" />
Which CSS method rotates the HTML element at a given degree?
scale() translate() rotate()
#some_id:hover {
  transform: rotate(60deg);
  -ms-transform: rotate(60deg);    /* IE 9 */
  -moz-transform: rotate(60deg);   /* Firefox */
}
Click on the function that returns the number with the highest value.
pow() min() max()
var maxn = Math.max(8, 4, 88, 56);
alert(maxn);      // 88
Which function prevent the same file from being included more than once in a page?
include() include_once() require()
include_once("some_file.php");
Chaining multiple jQuery effects

Last accessed pages

  1. JavaScript Course - Free lessons (20365)
  2. PHP MySQL - DELETE (1831)
  3. PHP MySQL - INSERT INTO (12940)
  4. Shape Tween - Flash Animation (4414)
  5. Triangles with CSS (2729)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (189)
  2. Register and show online users and visitors (123)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (117)
  4. Read Excel file data in PHP - PhpExcelReader (115)
  5. JavaScript Course - Free lessons (99)