By: Prem Tiwari | Last Updated: | In: Javascript & Ajax
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().
1 2 3 4 5 | // 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.
1 2 3 4 5 6 | // 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.
1 2 3 4 5 6 7 8 | // 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() :
1 2 3 4 5 6 7 8 | // 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() :
1 2 3 4 | // 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 ); |
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
