jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
Pop quiz – using slideToggle 1. What does the slideToggle() method return? a. Nothing b. The value true when the animation ends c. The original jQuery object for chaining purposes d. A string indicating whether the element is visible or not 2. What arguments can the slideToggle() method accept? Easing a. The duration and a callback function, or an object b. An array containing items specifying the duration, easing and a callback c. A collection of strings d. A jQuery object containing the selected element [ 89 ] Chapter 4 We discussed easing very briefly in Chapter 2, Fading Animations when we saw that each fading method could have an easing type set by passing an argument into the animation method being used. The sliding animations are the same and can also accept an easing type as an argument. Let's take a moment to familiarize ourselves with what easing is exactly and how it can be used with jQuery animations. Easing is a technique where the speed and/or the direction of animation are changed while the animation is running. Easing can make the animation start off slow and gradually speed up, start up fast and gradually slow down, and a whole host of other effects. jQuery has two modes of easing built in: linear easing and swing easing, with swing being the default for all types of animations. Sometimes using linear easing can help make a continuous animation run smoother, but the difference between swing and linear is subtle at best. There are many more types of easing than the two exposed by jQuery. The jquery. easing.1.3.js plugin, written by George McGinley Smith, adapts Robert Penner's original easing equations so that they can be used with jQuery, and makes 30 new types of easing available to us. The easing plugin changes the default easing type from swing to easeOutQuad.
Sliding Animations The new types of easing added by the plugin are listed in the following table: easeInQuad easeOutQuad EaseInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce Time for action – adding easing The easeOutBounce easing type adds a particularly attractive effect when used with slideDown() animations. The easing plugin can be obtained from http://gsgd.co.uk/sandbox/ jquery/easing/jquery.easing.1.3.js. A copy of this file is included with the companion download for this book. In this example, we'll add some easing to our example file. 1. Change the call to the slideDown() method in slideUp.html so that it appears as follows: $(this).addClass("on").next().slideDown(400, "easeOutBounce"); 2. Save the changed file as slideEasing.html. Don't forget to add a new reference to the easing plugin directly after the jQuery reference to avoid a script error. What just happened? We supply the name of the easing type we'd like to use as a string. It is the second argument, so to use it we must also supply the first argument. As we don't actually need to change the duration we just supply the default value of 400 milliseconds. When the login form drops down now, it will appear to bounce a little at the end of the animation. Suddenly our example has physics—the form appears to literally drop down as if pulled upon by gravity and doesn't just stop when it hits its full height, it bounces a little, giving a much more aesthetically pleasing effect. [ 90 ]
- Page 60 and 61: [ 39 ] Chapter 2 #messageList table
- Page 62 and 63: [ 41 ] Chapter 2 What just happened
- Page 64 and 65: 2. What format can these arguments
- Page 66 and 67: } var el = $(this); if (el.css("fil
- Page 68 and 69: [ 47 ] Chapter 2 Usually these meth
- Page 70 and 71: Time for action - animations with s
- Page 72 and 73: Download from Wow! eBook [ 51 ] Ch
- Page 74 and 75: 2. Save the changes as toggle.html.
- Page 76 and 77: 3 Managing Animations Like most of
- Page 78 and 79: [ 57 ] Chapter 3 A custom queue tha
- Page 80 and 81: If we wish to see how many function
- Page 82 and 83: 2. What does the queue() method ret
- Page 84 and 85: [ 63 ] Chapter 3 The argument we su
- Page 86 and 87: [ 65 ] Chapter 3 We pass a callback
- Page 88 and 89: [ 67 ] Chapter 3 The first argument
- Page 90 and 91: Delaying queue execution [ 69 ] Cha
- Page 92 and 93: [ 71 ] Chapter 3 Also note that the
- Page 94 and 95: 4 Sliding Animations Another type o
- Page 96 and 97: Time for action - creating a slide-
- Page 98 and 99: [ 77 ] Chapter 4 header form input
- Page 100 and 101: Pop quiz - sliding elements down 1.
- Page 102 and 103: Download from Wow! eBook }); }); $
- Page 104 and 105: Toggling the slide [ 83 ] Chapter 4
- Page 106 and 107: [ 85 ] Chapter 4 } h2 { margin:0; p
- Page 108 and 109: [ 87 ] Chapter 4 The previous scree
- Page 112 and 113: [ 91 ] Chapter 4 Easing is a great
- Page 114 and 115: [ 93 ] Chapter 4 Home Articles J
- Page 116 and 117: [ 95 ] Chapter 4 3. Save this file
- Page 118 and 119: In the previous screenshot, we see
- Page 120 and 121: Pop quiz - fixing the flicker 1. Wh
- Page 122 and 123: 5 Custom Animations The predefined
- Page 124 and 125: An alternative syntax for animate()
- Page 126 and 127: [ 105 ] Chapter 5 width:295px; marg
- Page 128 and 129: [ 107 ] Chapter 5 What just happene
- Page 130 and 131: [ 109 ] Chapter 5 Although not esse
- Page 132 and 133: [ 111 ] Chapter 5 The previous scre
- Page 134 and 135: [ 113 ] Chapter 5 The styles we use
- Page 136 and 137: [ 115 ] Chapter 5 What just happene
- Page 138 and 139: }, html: copy, width: expander.widt
- Page 140 and 141: [ 119 ] Chapter 5 If the image alre
- Page 142 and 143: [ 121 ] Chapter 5 d. Two objects wh
- Page 144 and 145: [ 123 ] Chapter 5 text-align:center
- Page 146 and 147: [ 125 ] Chapter 5 What just happene
- Page 148 and 149: [ 127 ] Chapter 5 Finally, we retur
- Page 150 and 151: [ 129 ] Chapter 5 Once we've define
- Page 152 and 153: } }; $(config.selector).find("a").c
- Page 154 and 155: [ 133 ] Chapter 5 In the previous s
- Page 156: Have a go hero - extending the plug
- Page 159 and 160: Extended Animations with jQuery UI
Pop quiz – using slideToggle<br />
1. What does the slideToggle() method return?<br />
a. Nothing<br />
b. The value true when the animation ends<br />
c. The original <strong>jQuery</strong> object for chaining purposes<br />
d. A string indicating whether the element is visible or not<br />
2. What arguments can the slideToggle() method accept?<br />
Easing<br />
a. The duration and a callback function, or an object<br />
b. An array containing items specifying the duration, easing and a callback<br />
c. A collection <strong>of</strong> strings<br />
d. A <strong>jQuery</strong> object containing the selected element<br />
[ 89 ]<br />
Chapter 4<br />
We discussed easing very briefly in Chapter 2, Fading <strong>Animation</strong>s when we saw that each<br />
fading method could have an easing type set by passing an argument into the animation<br />
method being used. The sliding animations are the same and can also accept an easing type<br />
as an argument. Let's take a moment to familiarize ourselves with what easing is exactly and<br />
how it can be used with <strong>jQuery</strong> animations.<br />
Easing is a technique where the speed and/or the direction <strong>of</strong> animation are changed while<br />
the animation is running. Easing can make the animation start <strong>of</strong>f slow and gradually speed<br />
up, start up fast and gradually slow down, and a whole host <strong>of</strong> other effects.<br />
<strong>jQuery</strong> has two modes <strong>of</strong> easing built in: linear easing and swing easing, with swing<br />
being the default for all types <strong>of</strong> animations. Sometimes using linear easing can help make<br />
a continuous animation run smoother, but the difference between swing and linear is<br />
subtle at best.<br />
There are many more types <strong>of</strong> easing than the two exposed by <strong>jQuery</strong>. The jquery.<br />
easing.1.3.js plugin, written by George McGinley Smith, adapts Robert Penner's original<br />
easing equations so that they can be used with <strong>jQuery</strong>, and makes 30 new types <strong>of</strong> easing<br />
available to us.<br />
The easing plugin changes the default easing type from<br />
swing to easeOutQuad.
Change language