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

A PHP Error was encountered

Severity: Notice

Message: Undefined variable: valuess

Filename: views/project_detail.php

Line Number: 243

Backtrace:

File: /var/www/wiise.co/public_html/application/views/views/project_detail.php
Line: 243
Function: _error_handler

File: /var/www/wiise.co/public_html/application/views/index.php
Line: 50
Function: include

File: /var/www/wiise.co/public_html/application/controllers/Courses.php
Line: 130
Function: view

File: /var/www/wiise.co/public_html/index.php
Line: 317
Function: require_once

A PHP Error was encountered

Severity: Notice

Message: Trying to get property of non-object

Filename: views/project_detail.php

Line Number: 243

Backtrace:

File: /var/www/wiise.co/public_html/application/views/views/project_detail.php
Line: 243
Function: _error_handler

File: /var/www/wiise.co/public_html/application/views/index.php
Line: 50
Function: include

File: /var/www/wiise.co/public_html/application/controllers/Courses.php
Line: 130
Function: view

File: /var/www/wiise.co/public_html/index.php
Line: 317
Function: require_once

Web Development using jQuery
  2h 8m           8,018 Views