CHAPTER 6:ANIMATION ANDEFFECTS
Remember, dynamically modifying a webpage takes just two steps1.  Select the element(s)2. Do something with them• This is ...
There are two optional parameters oneach effect1. speed  • fast  • normal  • slow  • number in milliseconds2. callback  • ...
Hiding and showing• hide()• show()• toggle()
Fading in and out• Fade elements in and out• fadeIn()• fadeOut()• fadeToggle()• fadeTo(percentage)
Sliding in and out• slideUp() – slides into view• slideDown() – slides out of view• slideToggle()
Animationsanimate( { property: value, …}, timeInMilliseconds);
Easing allows a more interestinganimation• jQuery has two built-in easing functions   • linear   • swing• To use this, add...
With the jQuery easing plug-in, you have       many more functions availablejswing           easeOutQuint     easeInElasti...
Callback functions allow youto do something when theeffect is complete$(selector).fadeIn( speed, function() {   // Do some...
Conclusion• jQuery allows animation and effects• You can show(), hide(), fadeIn(), fadeOut(), slideUp() and    slideDown()...
Lab• Login slider tutorial – pp. 190 – 192• Animated dashboard tutorial – pp. 198 - 203
Upcoming SlideShare
Loading in …5
×

06 animation and effects

391 views
359 views

Published on

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
391
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • pp. 125 - 127
  • pp. 185 – 187
  • pp. 187 – 188hide() also changes the height and width to zero.
  • pp. 192 – 194You can animate anything numeric like height, width, fontSize, borderTop, paddingYou cannot animate colorsPut all strings in quotesYou can't animate properties that are shortcuts. Use border-top, border-left … instead of border.
  • pp. 194 – 195
  • pp. 195 – 196Get the plug-in at http://gsgd.co.uk/sandbox/jquery/easing/
  • pp. 196 - 198
  • 06 animation and effects

    1. 1. CHAPTER 6:ANIMATION ANDEFFECTS
    2. 2. Remember, dynamically modifying a webpage takes just two steps1. Select the element(s)2. Do something with them• This is about the doing something – animating elements• For example$(selector).hide();$(selector).show();
    3. 3. There are two optional parameters oneach effect1. speed • fast • normal • slow • number in milliseconds2. callback • A function to call when the effect is over
    4. 4. Hiding and showing• hide()• show()• toggle()
    5. 5. Fading in and out• Fade elements in and out• fadeIn()• fadeOut()• fadeToggle()• fadeTo(percentage)
    6. 6. Sliding in and out• slideUp() – slides into view• slideDown() – slides out of view• slideToggle()
    7. 7. Animationsanimate( { property: value, …}, timeInMilliseconds);
    8. 8. Easing allows a more interestinganimation• jQuery has two built-in easing functions • linear • swing• To use this, add the easing function$(selector).animate({ property: value, property: value }, slow, swing);
    9. 9. With the jQuery easing plug-in, you have many more functions availablejswing easeOutQuint easeInElasticeaseInQuad easeInOutQuint easeOutElasticeaseOutQuad easeInSine easeInOutElasticeaseInOutQuad easeOutSine easeInBackeaseInCubic easeInExpo easeOutBackeaseOutCubic easeOutExpo easeInOutBackeaseInQuart easeInOutExpo easeInBounceeaseOutQuart easeInCirc easeOutBounceeaseInOutQuart easeOutCirc easeInOutBounceeaseInQuint easeInOutCirc
    10. 10. Callback functions allow youto do something when theeffect is complete$(selector).fadeIn( speed, function() { // Do something });
    11. 11. Conclusion• jQuery allows animation and effects• You can show(), hide(), fadeIn(), fadeOut(), slideUp() and slideDown()• You can specify a speed with an optional slow, fast, normal, and 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
    12. 12. Lab• Login slider tutorial – pp. 190 – 192• Animated dashboard tutorial – pp. 198 - 203

    ×