Jquery Course

Another way to Show and Hide an element on a page, it's to fade it in or out, which is always done by animation.

fadeIn() and fadeOut()

These two jQuery methods have the following sintaxes:
$('selector').fadeIn('duration');
$('selector').fadeOut('duration');
- fadeIn() - displays the matched elements by fading them to opaque.
- fadeOut() - hides the matched elements by fading them to transparent..
- "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 after the showing, or hiding is complete, you can use the following syntaxes:
$('selector').fadeIn('duration', function() {
  // code to execute when fade in finished
});
$('selector').fadeOut('duration', function() {
  // code to execute when fade out finished
});

The fadeIn(), and fadeOut() methods animates the opacity of the matched elements, like in the following example:
<style type="text/css"><!--
#shw, #cls {
 cursor:pointer;
 text-decoration:underline;
}
#menu {
 display:none;
 background:#bbdafe;
}
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when the tag with id="shw" is clicked
  $('#shw').click(function() {
    // fadeIn the element with id="menu"
    $('#menu').fadeIn(1200);
  });

  // when the tag with id="cls" is clicked
  $('#cls').click(function() {
    // fadeOut the element with id="menu", then executes a function to set a CSS color to #shw
    $('#menu').fadeOut('slow', function() {
      $('#shw').css('color', '#fe0708');
    });
  });
});
--></script>

<h5 id="shw">Show menu</h5>
<ul id="menu">
 <li>jQuery effect, fadeIn and fadeOut tutorial.</li>
 <li>coursesweb.net/javascript/</li>
 <li>http://api.jquery.com/category/effects/<br />
 <h5 id="cls">Close menu</h5></li>
</ul>
To see the effect, click on the "Show menu", then on the "Close menu" (see also the explanation in code):
Show menu

fadeToggle method

jQuery has another useful method to fade an element in and out, the fadeToggle() method. This function can perform both actions, if the element is visible, will apply fade out, and fade in if it is hidden.
Syntax:
$('selector').fadeToggle('duration');
• Or, if you want to execute a function when fade 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 (display and hide a menu when a button is clicked, and show the number of clicks):
<style type="text/css"><!--
#menu {
 display:none;
 background:#bbdafe;
}
--></style>

<script type="text/javascript"><!--
var cnts = 0;          // sets a variable to store the number of clicks

$(document).ready(function() {
  // when the tag with id="btn" is clicked
  $('#btn').click(function() {
    // fades #menu, with a speed of 1000 milliseconds
    // then increments the value of "cnts" variable by 1 and adds it in the tag id="cnt"
    $('#menu').fadeToggle(1000, function() {
      cnts++;
      $('#cnt').text(cnts);
    });
  });
});
--></script>

Counter clicks: <b id="cnt">0</b>
<button id="btn">Show/Hide</button>
<ul id="menu">
 <li>jQuery effect, fadeIn and fadeOut tutorial.</li>
 <li>coursesweb.net/javascript/</li>
 <li>http://api.jquery.com/category/effects/</li>
</ul>
Click multiple times on the button below to see the effect.
Counter clicks: 0

fadeTo method

To fade an element only partially, either in or out, you can use the fadeTo() method:
$('selector').fadeTo('duration', alpha);
Or, if you want to execute a function when fade is finished, use this syntax:
$('selector').fadeOut('duration', alpha, 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.
- alpha - represents "opacity", and is similar to the way opacity is set in CSS.

Example:
<style type="text/css"><!--
#div1 { position:absolute; background:#a2a3fe; width:100px; height:80px; top:0; margin:0; }
#div2 { position:absolute; background:#a5f8a5; width:90px; height:80px; top:12px; left:65px; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when the mouse is over the DIVs
  $('div').mouseover(function() {
    // fade the current DIV with a duration of 1250 qand opacity 0.8
    $(this).fadeTo(1250, 0.8);
  });
});
--></script>

<h3>Have a Good Life</h3>
<div id="div1"></div>
<div id="div2"></div>
The code in this example fades div to an opacity of 0.8, when the mouse is over the div, completing the animation within 1250 milliseconds.
Have a Good Life

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Using fadeIn and fadeOut

Last accessed pages

  1. innerHTML in PHP (12128)
  2. SHA256 Encrypt hash in JavaScript (18173)
  3. Simple Admin Login PHP Script (8218)
  4. Node.js Move and Copy Directory (11717)
  5. Send E-mail with HTML tags and Attachment (4131)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (527)
  2. PHP Unzipper - Extract Zip, Rar Archives (427)
  3. SHA256 Encrypt hash in JavaScript (410)
  4. Read Excel file data in PHP - PhpExcelReader (364)
  5. Create simple Website with PHP (338)