06 animation and effects

  • 450 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
450
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
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