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 tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Chaining multiple jQuery effects

Last accessed pages

  1. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (8337)
  2. Read Excel file data in PHP - PhpExcelReader (56662)
  3. Drag and Drop with HTML5 attributes (3959)
  4. Using slideDown and SlideUp (1521)
  5. Add, Change, and Remove Attributes with jQuery (35993)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (399)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (317)
  3. Register and show online users and visitors (292)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (276)
  5. Insert, Select and Update NULL value in MySQL (182)