Add jQuery fade-in effect to your article

No? Then click here to view it again.

jQuery is an incredibly versatile javascript library that enables you to add some visually pleasing effects to your Joomla website with only a few lines of code pasted into the HD-Anycode module.

Here's the entire code used for this example...

<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>#ghostly {opacity: 0;}</style>
<script>
jQuery(document).ready(function() {jQuery('#ghostly').animate({ opacity: '1'}, 3000);});
</script>

The first line loads the latest version of jQuery (if your site is already using jQuery you should remove this line).

The second line is a simple CSS instruction that ensures anything contained within the "ghostly" div is hidden (or more specifically: it has zero opacity).

The remaining lines then call on jQuery to set the opacity to "1" over the course of 3000 milliseconds.

For this all to work you need to ensure that all the "ghostly" HTML code is encased within a "ghostly" div. In other words at the beginning of your article add the opening div tag... <div id="ghostly"> ...and at the very end of your article add the closing div tag... </div>

You can use the same approach to create a range of transition effects.

eg. changing the code to the following will slide the content down....

<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>#ghostly {height: 0px;}</style>
<script>
jQuery(document).ready(function() {jQuery('#ghostly').animate({ height: '500px'}, 3000);});
</script>

HD-Anycode