jQuery Effects

jQuery Effects: Slide, Fade, and Animate

I have created excellent CSS-based animation effects using jQuery. This includes sliding elements up and down/into and out of view, fading elements in and out, and performing custom animations of other CSS properties.

  1. jQuery provides three commands for sliding elements in and out of view, and all of their names make the functionality fairly self-explanatory. "slideUp" slides an element up and out of view, "slideDown" slides an element down and into view - a common use for these methods is to make a drop-down menu slide down when it's parent link is hovered over, and to have it slides up when a different menu item is being hovered over. Finally, "slideToggle" intelligently alternates between sliding an element up and sliding it down, each time "slideToggle" is called.

For the sliding effects (and the fading effects we'll cover next), you can provide either the argument 'slow', which is equivalent to 600ms, no argument which is equal to 400ms, or 'fast' which is equivalent to 200ms. You can also specify a custom time length by providing the number of milliseconds you'd like the effect/animation to take.

Here's a functional demo of sliding up, sliding down, and toggling sliding:

HTML Code:

JavaScript Code:


jQuery Effects

  0     11    

Published : Jun 1st 2018

Related Course

Web Development using jQuery
  2h 8m           19,792 Views