The code is more or less the same as the previous tutorial with .show(), .hide(), and .toggle(). However, these are two different effects or events: .fadeIn() and .fadeOut(). Take a look at the below code:

In Your HTML BODY Element

<br /><br /><%%KEEPWHITESPACE%%> &lt;h5&gt;.fadeOut()&lt;/h5&gt;<br /><%%KEEPWHITESPACE%%> &lt;p&gt;&lt;a href="#" id="disappear"&gt;Fade Out&lt;/a&gt;&lt;/p&gt;<br /><br /><%%KEEPWHITESPACE%%> &lt;h5&gt;.fadeIn()&lt;/h5&gt;<br /><%%KEEPWHITESPACE%%> &lt;p&gt;&lt;a href="#" id="appear"&gt;Fade In&lt;/a&gt;&lt;/p&gt;<br /><br />&lt;div&gt;&lt;p&gt;This is an example piece of content that I will be showing, hiding, or toggling.&lt;/p&gt;&lt;/div&gt;<br /><br />

In Your External js File (within the ready function)

<br />// Fading Effects<br /><%%KEEPWHITESPACE%%> $('#appear').click( function() {<br /><%%KEEPWHITESPACE%%>      $('div.MyDiv').fadeIn('slow');<br /><%%KEEPWHITESPACE%%>      return false;<br /><%%KEEPWHITESPACE%%>      });<br /><br /><%%KEEPWHITESPACE%%> $('#disappear').click( function() {<br /><%%KEEPWHITESPACE%%>      $('div.MyDiv').fadeOut('slow');<br /><%%KEEPWHITESPACE%%>      return false;<br /><%%KEEPWHITESPACE%%>      });<br />

Tweet