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

Like this? Share it with your network

Share

06 animation and effects

on

  • 682 views

 

Statistics

Views

Total Views
682
Views on SlideShare
682
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

06 animation and effects Presentation 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