Introduction to Jquery Effects with example

jQuery makes it trivial to add simple effects to your page. Effects can use the built-in settings, or provide a customized duration. You can also create custom animations of arbitrary CSS properties.

Hiding and Showing Contents

In the jQuery you can hide and show the contents instantaneously with .show() or .hide().

Fade and Slide Animations

There are additional methods that can help. .slideDown() and .slideUp() show and hide content, respectively, using only a slide effect. Slide animations are accomplished by rapidly making changes to an element’s CSS height property.

Changing Display Based on Current Visibility State

Using the JQuery you can also change a content’s visibility based on its current visibility state. .toggle() will show content that is currently hidden and hide content that is currently visible.

Managing Animation Effects

jQuery provides some additional features for controlling your animations using .stop() and .delay().

Example .stop() :

Example .delay() :

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

Recommended Posts:


Prem Tiwari

An engineer by profession and a passionate blogger by heart. Founder of FreeWebMentor.com (A Programming blog for beginners), Tech Speaker at various forums. A part from this he is an open source enthusiast, WordPress Lover, Blogger, SEO, and Growth Strategic.

Article Tags: ,