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 defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Using fadeIn and fadeOut

Last accessed pages

  1. PHP getElementById and getElementsByTagName (33801)
  2. querySelector and querySelectorAll (12942)
  3. Star shapes with CSS (5601)
  4. Contact page - CoursesWeb (29988)
  5. Tabs effect with CSS (30646)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1431)
  2. Contact page - CoursesWeb (1402)
  3. Tabs effect with CSS (1395)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (552)
  5. PHP getElementById and getElementsByTagName (422)