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() :

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: ,

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Solved Programs