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 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 fadeIn and fadeOut

Last accessed pages

  1. JavaScript code and PHP (40616)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (137121)
  3. Node.js Course (2571)
  4. Animating in Flash - Frame-by-Frame Animation (2761)
  5. Get and change IFrame content through a JavaScript script created in another IFrame (16340)

Popular pages this month

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