Jquery Course

There are various ways to Show and Hide an element on a page with jQuery, one of these methods is with a sliding motion.

slideDown() and SlideUp()

The slideDown() method displays the matched elements by animating their height.
The slideUp() method hides the matched elements with a sliding motion.
These two jQuery methods have the following sintaxes:
$('selector').slideDown('duration');
$('selector').SlideUp('duration');
- "duration" - (optional) indicates the speed of the effect. It can be the strings "fast" and "slow", or a number that indicates the speed in milliseconds.

To execute some instructions when sliding motion is finished, you can use the following syntaxes:
$('selector').slideDown('duration', function() {
  // code to execute when slideDown  finished
});
$('selector').SlideUp('duration', function() {
  // code to execute when SlideUp is finished
});

Example slideDown

Displays a <div> (with id="dv1") with a sliding motion, then, when this effect is finished, displays another <div> (with id="dv2") in the same way.
<style type="text/css"><!--
div { display:none; float:left; width:200px; height:100px; }
#dv1 {background:#0708fe; }
#dv2 {background:#07fe08; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when the tag with id="btn" is clicked, apply slideDown to #dv1, then to #dv2
  $('#btn').click(function() {
    $('#dv1').slideDown(1000, function() {
      $('#dv2').slideDown(800);
    });
  });
});
--></script>

<div id="dv1">Here can be some content</div>
<div id="dv2">Another content</div>
<button id="btn" style="clear:both;">Show</button>
Click the button below to see the effect.

Example slideUp

When click on a button, hides <div> (with class="cls"), then hides the button.
<style type="text/css"><!--
div.cls { float:left; width:200px; height:100px; }
#dv1 {background:#0708fe; }
#dv2 {background:#07fe08; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when the tag with id="btn" is clicked, hides all DIVs with class="cls"
  // then hides the button
  $('#btn').click(function() {
    $('div.cls').slideUp(1000, function() {
      $('#btn').slideUp('slow');
    });
  });
});
--></script>

<div id="dv1" class="cls">Here can be some content</div>
<div id="dv2" class="cls">Another content</div>
<button id="btn" style="clear:both;">Hide</button>
Click on the "Hide" button to see the effect.
Here can be some content
Another content

slideToggle() method

The slideToggle() displays or hides the matched elements by animating their height. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
Syntax:
$('selector').slideToggle('duration');
• Or, if you want to execute a function when sliding motion is finished, use this syntax:
$('selector').fadeToggle('duration', function() {
  // code to execute when fade is finished
});
- "duration" - sets the speed of the effect. It can be the strings "fast" and "slow", or a number that indicates the speed in milliseconds.

Example. Vertical menu with two lists that will be displayed when the mouse is over the menu, and hidde them when mouse out:
<style type="text/css"><!--
ul { float:left; cursor:pointer; }
li.cls {
 display:none;
 background:#e0e0fe;
}
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when mouse is over or out UL, apply slideToggle
  $('ul').hover(function() {
    $(this).find('.cls').slideToggle('slow');
  });
});
--></script>

<ul>
 <li>Free Courses</li>
 <li class="cls"><a href="https://coursesweb.net/html/">HTML</a></li>
 <li class="cls"><a href="https://coursesweb.net/css/">CSS</a></li>
 <li class="cls"><a href="https://coursesweb.net/javascript/">Javascript</a></li>
</ul>
<ul>
 <li>Tutorials</li>
 <li class="cls"><a href="https://coursesweb.net/actionscript/lessons-as3">ActionScript</a></li>
 <li class="cls"><a href="https://coursesweb.net/ajax/">Ajax</a></li>
 <li class="cls"><a href="https://coursesweb.net/jquery/jquery-tutorials">jQuery</a></li>
</ul>
<br style="clear:both;" />
- The hover() method binds handlers for both mouseenter and mouseleave events.
This is the result of the code above. Position the mouse over the "Free Courses" and "Tutorials".

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"];
}
Using slideDown and SlideUp

Last accessed pages

  1. SHA256 Encrypt hash in JavaScript (31105)
  2. PHP Unzipper - Extract Zip, Rar Archives (31615)
  3. sPBM - Simple PHP Backup Manager (3240)
  4. SBMD - Simple Backup MySQL Database (4986)
  5. Add /Delete rows in HTML table with JavaScript (4219)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (320)
  2. PHP Unzipper - Extract Zip, Rar Archives (112)
  3. Read Excel file data in PHP - PhpExcelReader (102)
  4. SHA1 Encrypt data in JavaScript (81)
  5. Get and Modify content of an Iframe (74)