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:
$('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 is used to include external CSS file in web page?
<body> <script> <link>
<link href="/templ/style.css" rel="stylesheet" type="text/css" />
Which CSS property sets the text size?
font-weight text-decoration font-size
h2 {
  font-size: 1em;
}
Indicate the JavaScript property that can add HTML code into an element.
text value innerHTML
document.getElementById("someID").innerHTML = "HTML content";
Click on the function that returns the number of characters of a string in PHP.
count() strlen() stristr()
$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr;       // 22
Chaining multiple jQuery effects

Last accessed pages

  1. Creating style sheets (914)
  2. CSS cursor property - Custom Cursors (6396)
  3. Prayer The Art of Believing (1769)
  4. The Mastery of Love (7688)
  5. SHA512 Encrypt hash in JavaScript (25036)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (705)
  2. CSS cursor property - Custom Cursors (92)
  3. Read Excel file data in PHP - PhpExcelReader (71)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (67)
  5. PHP Unzipper - Extract Zip, Rar Archives (53)