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 tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Using fadeIn and fadeOut

Last accessed pages

  1. Read Excel file data in PHP - PhpExcelReader (56662)
  2. Drag and Drop with HTML5 attributes (3959)
  3. Using slideDown and SlideUp (1521)
  4. Add, Change, and Remove Attributes with jQuery (35993)
  5. Using fadeIn and fadeOut (1285)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (399)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (316)
  3. Register and show online users and visitors (292)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (276)
  5. Insert, Select and Update NULL value in MySQL (182)