06 animation and effects
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

06 animation and effects

on

  • 576 views

 

Statistics

Views

Total Views
576
Views on SlideShare
576
Embed Views
0

Actions

Likes
0
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Presentation Transcript

  • 1. CHAPTER 6:ANIMATION ANDEFFECTS
  • 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. 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. Hiding and showing• hide()• show()• toggle()
  • 5. Fading in and out• Fade elements in and out• fadeIn()• fadeOut()• fadeToggle()• fadeTo(percentage)
  • 6. Sliding in and out• slideUp() – slides into view• slideDown() – slides out of view• slideToggle()
  • 7. Animationsanimate( { property: value, …}, timeInMilliseconds);
  • 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. 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. Callback functions allow youto do something when theeffect is complete$(selector).fadeIn( speed, function() { // Do something });
  • 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. Lab• Login slider tutorial – pp. 190 – 192• Animated dashboard tutorial – pp. 198 - 203