Your SlideShare is downloading. ×
06 animation and effects
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

06 animation and effects

480
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
480
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JQUERY ANIMATIONAND EFFECTS
  • 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