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
What attribute makes an option from <select> selected?
checked="checked" selected="selected" disabled="disabled"
<select name="a_name">
 <option value="val1">Option 1</option>
 <option value="val2" selected="selected">Option 2</option>
</select>
What CSS value allows to create color gradients for background?
contain repeat-x linear-gradient
#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
}
What statement creates an array in JavaScript?
[] {} new Object()
var arr = [1, "CoursesWeb.net", "MarPlo.net"];
alert(arr[2]);
Indicate the PHP function used to redirect to other page.
function() header() switch()
header("Location: http://coursesweb.net/");
exit;
Using fadeIn and fadeOut

Last accessed pages

  1. Select the Content of HTML Element (3676)
  2. New Form elements and attributes in HTML5 (5247)
  3. SHA1 Encrypt data in JavaScript (21620)
  4. $_GET, $_POST and $_REQUEST Variables (31153)
  5. JavaScript strip_tags and stripslashes (5500)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (32)
  2. SHA256 Encrypt hash in JavaScript (16)
  3. Get and Modify content of an Iframe (13)
  4. Create simple Website with PHP (13)
  5. SHA1 Encrypt data in JavaScript (12)