06 animation and effects.pptx
-
Upload
rap-payne -
Category
Technology
-
view
98 -
download
0
Transcript of 06 animation and effects.pptx
JQUERY ANIMATION AND EFFECTS
Remember, dynamically modifying a web page takes just two steps 1. Select the element(s) 2. Do something with them • This is about the doing something – animating elements • For example $(selector).hide();$(selector).show();
There are two optional parameters on each effect 1. speed
• fast • normal • slow • number in milliseconds
2. callback • A function to call when the effect is over
Hiding and showing • hide() • show() • toggle()
Fading in and out • Fade elements in and out • fadeIn() • fadeOut() • fadeToggle() • fadeTo(duration, percentage)
Sliding in and out • slideUp() – slides out of view • slideDown() – slides into view • slideToggle()
Animations animate( { property: value, …}, timeInMilliseconds);
Easing allows a more interesting animation • jQuery has two built-in easing functions
• linear • swing
• To use this, add the easing function $(selector).animate({ property: value, property: value }, 'slow', 'swing');
With the jQueryUI easing plug-in, you have many more functions available
jswing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint
easeOutQuint easeInOutQuint easeInSine easeOutSine easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc
easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce
Callback functions allow you to do something when the effect is complete $(selector).fadeIn( speed, function() { // Do something });
tl;dr • jQuery allows animation and effects • You can show(), hide(), fadeIn(), fadeOut(), slideUp() and
slideDown() • All have optional speeds (slow, fast, normal, or number) • Animation allows you to animate any numeric property • Easing functions create more interesting animations than
a simple linear one • You can even call a function when the animation is
complete with a callback function