Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

jQuery

Learn step by step



Introduction to Effects

Showing and Hiding Content

jQuery can show or hide content instantaneously with .show() or .hide():

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

Whenever jQuery hides an element by these functions, it sets its CSS display property to none. Means the content will have zero width and height; it does not mean that the content will simply become transparent and leave an empty area on the page.

jQuery can also show or hide content by means of animation effects. We can tell .show() and .hide() to use animation in a couple of ways. One is to pass in an argument of 'slow', 'normal', or 'fast':

// To slowly hide all paragraphs
$( "p" ).hide( "slow" );
// To quickly show all divs that have the hidden style class
$( "div.hidden" ).show( "fast" );

If we prefer more direct control over the duration of the animation effect, we can pass desired duration in milliseconds to function .show() and .hide():

// To hide paragraphs over a half second
$( "p" ).hide( 500 );
// To show divs that have the hidden style class over 1.25 seconds
$( "div.hidden" ).show( 1250 );

Most of developers pass in a number of milliseconds to have more precise control over the duration.

link Fade and Slide Animations

We may have noticed that .show() and .hide() functions uses a combination of slide and fade effects when showing and hiding content in an animated way. If we would rather show or hide content with one effect or the other, there are additional functions that can help. .slideDown() and .slideUp() show and hide content, respectively, using a slide effect. They are (Slide animations) accomplished by rapidly making changes to an element's CSS height property.

// To hide all paragraphs using a slide up animation over 0.77 seconds
$( "p" ).slideUp( 770 );
// To show all hidden divs using a slide down animation over 0.4 seconds
$( "div.hidden" ).slideDown( 400 );

Similarly .fadeIn() and .fadeOut() functions show and hide content, respectively, by fade animation. Fade animations involve rapidly making changes to the element's CSS opacity property.

// To hide all paragraphs using a fade out animation over 1.7 seconds
$( "p" ).fadeOut( 1700 );
// To show all hidden divs using a fade in animation over 0.76 seconds
$( "div.hidden" ).fadeIn( 760 );
Changing Display Based on Current Visibility State

The jQuery also let you change a content's visibility based on its current visibility state. .toggle() function will show content that is currently hidden and hide content that is currently visible. We can pass the same arguments to .toggle() as you pass to any of the effects methods above.

// To instantaneously toggle the display of all paragraphs
$( "p" ).toggle();
// To slowly toggle the display of all images
$( "img" ).toggle( "slow" );
// To toggle the display of all divs over 1.86 seconds
$( "div" ).toggle( 1860 );

.toggle() function will use a combination of slide and fade effects, just as .show() and .hide() functions do. We can toggle the display of content with just a slide or a fade using .slideToggle() and .fadeToggle().

// Toggle the display of all ordered lists over 1 second using slide up/down animations
$( "ol" ).slideToggle( 1000 );
// Toggle the display of all blockquotes over 0.4 seconds using fade in/out animations
$( "blockquote" ).fadeToggle( 400 );
Managing Animation Effects

The jQuery provides some additional features for controlling animations:

.stop

.stop() will immediately terminate all animations running on the elements in the selection. We might give end-users control over page animations by rigging a button they can click to stop the animations.

// To 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 );
.delay()

.delay() is used to introduce a delay between successive animations. Given Example:

// To hide all level 1 headings over 0.5 second; then wait for 1.7 seconds
// and reveal all level 1 headings over 0.33 seconds
$( "h1" ).hide( 500 ).delay( 1700 ).show( 330 );
jQuery.fx

jQuery.fx object has number of properties that control how the effects are implemented. jQuery.fx.speeds maps arguments slow, normal, and fast duration as mentioned above to a specific number of milliseconds. Default value of jQuery.fx.speeds is:

{ slow: 600,
fast: 200,
_default: 400 // Default speed, used for "normal" }

We can modify any of these settings and even introduce some of our own:

jQuery.fx.speeds.fast = 300;
jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.excruciating = 60000;

jQuery.fx.interval controls the number of frames per second that is displayed in an animation. Default value is 13 milliseconds between successive frames. We can set this to a lower value for faster browsers to make the animations run smoother. Nevertheless this will mean more frames per second and thus a higher computational load for browsers, so we should be sure to test performance implications of doing so thoroughly.

Finally, the jQuery.fx.off can be set to true to disable all animations. Elements will instantly be set to the target final state instead. This is especially useful when dealing with old browsers; we also may want to provide the option to disable all animations to our users.

$( "<button type='button'></button>" )
.text( "Disable Animations" )
.on( "click", function() {
jQuery.fx.off = true;
})
.appendTo( document.body );


Related Videos