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 defines the clickable areas inside the image map?
<map> <img> <area>
<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>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Chaining multiple jQuery effects

Last accessed pages

  1. Get and Modify content of an Iframe (31992)
  2. Display data from PHP Array, or MySQL in HTML table (26682)
  3. Read Excel file data in PHP - PhpExcelReader (96542)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (137124)
  5. Styling link buttons using a Single Image and CSS (2923)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (322)
  2. PHP Unzipper - Extract Zip, Rar Archives (112)
  3. Read Excel file data in PHP - PhpExcelReader (103)
  4. SHA1 Encrypt data in JavaScript (81)
  5. Get and Modify content of an Iframe (75)
Chat
Chat or leave a message for the other users
Full screenInchide