jquery Animation for beginners

Size: px

Start display at page:

Download "jquery Animation for beginners"

Diane Thornton
5 years ago
Views:

1 jquery Animation for beginners

3 Types of Animation moving elements dimension (zooming/scaling & skewing) rotating (spinning & flipping) opacity/fade hide/show images filters (blur, invert, sepia, grayscale) colors swapping & fading

4 jquery Animation Effects.hide() Hide the matched elements..show() Display the matched elements..toggle() Display or hide the matched elements..animate() Perform a custom animation of a set of CSS properties..delay() Set a timer to delay execution of subsequent items in the queue..stop() Stop the currently-running animation on the matched elements..fadein() Display the matched elements by fading them to opaque..fadeout() Hide the matched elements by fading them to transparent..fadeto() Adjust the opacity of the matched elements..fadetoggle() Display or hide the matched elements by animating their opacity..slideup() Hide the matched elements with a sliding motion..slidedown() Display the matched elements with a sliding motion..slidetoggle() Display or hide the matched elements with a sliding motion. Basic Custom Fading Sliding

5 .hide() Hide the matched elements..hide( duration [, easing ] [, complete ] ) $( ".selector" ).hide(); $( ".selector" ).hide( 5000 ); $( ".selector" ).hide( 5000, "linear" ); $( ".selector" ).hide( 5000, "linear", myfunction() ); Note: The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.

6 .show() Display the matched elements..show( duration [, easing ] [, complete ] ) $( ".selector" ).show(); $( ".selector" ).show( 5000 ); $( ".selector" ).show( 5000, "linear" ); $( ".selector" ).show( 5000, "linear", myfunction() ); Note: The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.

7 .toggle() Display or hide the matched elements..toggle( duration [, easing ] [, complete ] ) $( ".selector" ).toggle(); $( ".selector" ).toggle( 5000 ); $( ".selector" ).toggle( 5000, "linear" ); $( ".selector" ).toggle( 5000, "linear", myfunction() ); Note: The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.

8 jquery Animation Effects.hide() Hide the matched elements..show() Display the matched elements..toggle() Display or hide the matched elements..animate() Perform a custom animation of a set of CSS properties..delay() Set a timer to delay execution of subsequent items in the queue..stop() Stop the currently-running animation on the matched elements..fadein() Display the matched elements by fading them to opaque..fadeout() Hide the matched elements by fading them to transparent..fadeto() Adjust the opacity of the matched elements..fadetoggle() Display or hide the matched elements by animating their opacity..slideup() Hide the matched elements with a sliding motion..slidedown() Display the matched elements with a sliding motion..slidetoggle() Display or hide the matched elements with a sliding motion. Basic Custom Fading Sliding

9 .animate() Perform a custom animation of a set of CSS properties..animate( properties [, duration ] [, easing ] [, complete ] ) $( ".selector" ).click(function() { $( ".block" ).animate({ opacity: 0.25, left: "+=50", height: "toggle" }, 5000, function() { // Animation complete. }); }); $( ".selector" ).animate({ opacity: "toggle" }); $( ".selector" ).animate({ opacity: "toggle" }, 5000 ); $( ".selector" ).animate({ opacity: "toggle" }, 5000, "linear" ); $( ".selector" ).animate({ opacity: "toggle" }, 5000, "linear", myfunction() );

10 .delay() Set a timer to delay execution of subsequent items in the queue..delay( duration [, queuename ] ) $( ".selector" ).hide( 5000 ).delay( 5000 ).show( 5000 ); Note: The strings 'fast' and 'slow' can be used here too.

11 .stop() Stop the currently-running animation on the matched elements..stop( [queue ] [, clearqueue ] [, jumptoend ] ) $( ".selector a" ).hover(function() { $( this ).find( "img" ).stop().fadeout(); }, function() { $( this ).find( "img" ).stop().fadein(); });

12 jquery Animation Effects.hide() Hide the matched elements..show() Display the matched elements..toggle() Display or hide the matched elements..animate() Perform a custom animation of a set of CSS properties..delay() Set a timer to delay execution of subsequent items in the queue..stop() Stop the currently-running animation on the matched elements..fadein() Display the matched elements by fading them to opaque..fadeout() Hide the matched elements by fading them to transparent..fadeto() Adjust the opacity of the matched elements..fadetoggle() Display or hide the matched elements by animating their opacity..slideup() Hide the matched elements with a sliding motion..slidedown() Display the matched elements with a sliding motion..slidetoggle() Display or hide the matched elements with a sliding motion. Basic Custom Fading Sliding

13 .fadein() Display the matched elements by fading them to opaque..fadein( [duration ] [, easing ] [, complete ] ) $( ".music" ).fadein(); $( ".music" ).fadein( 5000 ); $( ".music" ).fadein( 5000, "linear" ); $( ".music" ).fadein( 5000, "linear", myfunction() ); Note: The strings 'fast' and 'slow' can be used here too.

14 .fadeout() Hide the matched elements by fading them to transparent..fadeout( [duration ] [, easing ] [, complete ] ) $( ".ghost" ).fadeout(); $( ".ghost" ).fadeout( 5000 ); $( ".ghost" ).fadeout( 5000, "linear" ); $( ".ghost" ).fadeout( 5000, "linear", myfunction() ); Note: The strings 'fast' and 'slow' can be used here too.

15 .fadeto() Adjust the opacity of the matched elements..fadeto( duration, opacity [, easing ] [, complete ] ) $( ".stealth" ).fadeto( "slow", 0.50 ); $( ".stealth" ).fadeto( "slow", 0.50, "linear" ); $( ".stealth" ).fadeto( "slow", 0.50, "linear", myfunction() ); Note: The strings 'fast' and 'slow' can be used here too.

16 .fadetoggle() Display or hide the matched elements by animating their opacity..fadetoggle( [duration ] [, easing ] [, complete ] ) $( ".ghost" ).fadetoggle(); $( ".ghost" ).fadetoggle( 5000 ); $( ".ghost" ).fadetoggle( 5000, "linear" ); $( ".ghost" ).fadetoggle( 5000, "linear", myfunction() ); Note: The strings 'fast' and 'slow' can be used here too.

17 jquery Animation Effects.hide() Hide the matched elements..show() Display the matched elements..toggle() Display or hide the matched elements..animate() Perform a custom animation of a set of CSS properties..delay() Set a timer to delay execution of subsequent items in the queue..stop() Stop the currently-running animation on the matched elements..fadein() Display the matched elements by fading them to opaque..fadeout() Hide the matched elements by fading them to transparent..fadeto() Adjust the opacity of the matched elements..fadetoggle() Display or hide the matched elements by animating their opacity..slideup() Hide the matched elements with a sliding motion..slidedown() Display the matched elements with a sliding motion..slidetoggle() Display or hide the matched elements with a sliding motion. Basic Custom Fading Sliding

18 .slideup() Hide the matched elements with a sliding motion..slideup( [duration ] [, easing ] [, complete ] ) $( ".anti-gravity" ).slideup(); $( ".anti-gravity" ).slideup( 5000 ); $( ".anti-gravity" ).slideup( 5000, "linear" ); $( ".anti-gravity" ).slideup( 5000, "linear", myfunction() ); Note: The strings 'fast' and 'slow' can be used here too.

19 .slidedown() Display the matched elements with a sliding motion..slidedown( [duration ] [, easing ] [, complete ] ) $( ".fireman" ).slidedown(); $( ".fireman" ).slidedown( 5000 ); $( ".fireman" ).slidedown( 5000, "linear" ); $( ".fireman" ).slidedown( 5000, "linear", myfunction() ); Note: The strings 'fast' and 'slow' can be used here too.

20 .slidetoggle() Display or hide the matched elements with a sliding motion..slidetoggle( [duration ] [, easing ] [, complete ] ) $( ".window" ).slidetoggle(); $( ".window" ).slidetoggle( 5000 ); $( ".window" ).slidetoggle( 5000, "linear" ); $( ".window" ).slidetoggle( 5000, "linear", myfunction() ); Note: The strings 'fast' and 'slow' can be used here too.

21 jquery UI Effects

22 jquery UI Easings

24 Adam Culpepper Front-end Web Envoc adamculpepper.net jquery UI Animation Effects jquery 2.0 Animation Techniques: Beginner's Guide jquery Easings Demos Product Link jquery Animation Effects Crappy jquery Tron Game

HTML5 and CSS3 The jquery Library Page 1

HTML5 and CSS3 The jquery Library Page 1 1 HTML5 and CSS3 THE JQUERY LIBRARY 8 4 5 7 10 11 12 jquery1.htm Browser Compatibility jquery should work on all browsers The solution to cross-browser issues is