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

// Instantaneously hide all paragraphs
$( "p" ).hide();
 
// Instantaneously show all divs that have the hidden style class
$( "div.hidden" ).show();

// Instantaneously hide all paragraphs

$( "p" ).hide();

// Instantaneously show all divs that have the hidden style class

$( "div.hidden" ).show();

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.

// Hide all paragraphs using a slide up animation over 0.8 seconds
$( "p" ).slideUp( 800 );
 
// Show all hidden divs using a slide down animation over 0.6 seconds
$( "div.hidden" ).slideDown( 600 );

// Hide all paragraphs using a slide up animation over 0.8 seconds

$( "p" ).slideUp( 800 );

// Show all hidden divs using a slide down animation over 0.6 seconds

$( "div.hidden" ).slideDown( 600 );

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.

// Instantaneously toggle the display of all paragraphs
$( "p" ).toggle();
 
// Slowly toggle the display of all images
$( "img" ).toggle( "slow" );
 
// Toggle the display of all divs over 1.8 seconds
$( "div" ).toggle( 1800 );

// Instantaneously toggle the display of all paragraphs

$( "p" ).toggle();

// Slowly toggle the display of all images

$( "img" ).toggle( "slow" );

// Toggle the display of all divs over 1.8 seconds

$( "div" ).toggle( 1800 );

Managing Animation Effects

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

Example .stop() :

// Create a button to stop all animations on the page:
$( "<button type='button'></button>" )
    .text( "Stop All Animations" )
    .on( "click", function() {
        $( "body *" ).filter( ":animated" ).stop();
    })
    .appendTo( document.body );

// Create a button to stop all animations on the page:

$( "<button type='button'></button>" )

.text( "Stop All Animations" )

.on( "click", function() {

$( "body *" ).filter( ":animated" ).stop();

})

.appendTo( document.body );

Example .delay() :

// Hide all level 1 headings over half a second; then wait for 1.5 seconds
// and reveal all level 1 headings over 0.3 seconds
$( "h1" ).hide( 500 ).delay( 1500 ).show( 300 );

// Hide all level 1 headings over half a second; then wait for 1.5 seconds

// and reveal all level 1 headings over 0.3 seconds

$( "h1" ).hide( 500 ).delay( 1500 ).show( 300 );

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.

Introduction to Jquery Effects with example

Recommended Posts:

webmentor