This article contains visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.

In case you don’t know about jQuery, it is a “write less, do more” Javascript library.

How jQuery works?
First you need to download a copy of jQuery and insert it in your html page (preferably within the tag). Then you need to write functions to tell jQuery what to do. The diagram below explains the detail how jQuery work:

Simple slide panel

Let’s start by doing a simple slide panel. You’ve probably seen a lot of this, where you click on a link and a panel slide up/down. (view demo)

When an elment with is clicked, it will slideToggle (up/down) the element and then toggle a CSS to the element. The active class will toggle the background position of the arrow image (by CSS).

$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});
});

Thanks.