jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
[ 139 ] Chapter 6 The download builder shown in the previous screenshot gives us everything we need to run any subset of the library components. All we'll be using in this chapter are the effects, so when we download a package we should only select the components found in the effects subsection at the left. We don't need to include a theme, and we don't even need to include the library core. The effects can be used completely independently of the rest of the library; all we need is the effects Core file and the individual effects we require. Make sure all of them are selected and download the package. The package will give us everything we need to use the components we've selected, including a copy of the latest stable release of jQuery, so when using jQuery UI, jQuery itself does not need to be downloaded separately. All of the JavaScript for each selected component is combined and compressed into a single file by the download builder, and any functional CSS or theme files will be combined into a single stylesheet. We don't need any of the theme files for working with the effects, but ensure the .js file from the archive provided by the download builder goes into our js folder. A new template file The examples in the remainder of this chapter will be short, mostly image-based examples that illustrate each effect in turn, so it makes sense to use a slightly different template file for them. Create a new template file by adding a reference to the jQuery UI source file directly after the jQuery one just before the closing tag. We won't be using any HTML5 elements in this chapter so we can safely remove the link to shiv.js in our new template file. The new effects added by jQuery UI jQuery UI gives us 14 new predefined animations to use in our pages; these are listed, together with a brief description of their usage, as follows: Animations Description blind The target element is shown or hidden by rolling it down or up like a window blind. bounce The target element is bounced horizontally or vertically for a specified number of times. clip The target element is shown or hidden by moving opposing edges in towards the center of the element, or out to its full width or height. drop The element appears to drop onto or off of the page in order to show or hide it respectively.
Extended Animations with jQuery UI Animations Description explode The explode effect causes the target element to separate into a specified number of pieces before fading away, or to fade into view in several pieces before coming together to form the complete element. fold The element appears to fold closed or open. highlight The background-color of the target element is set (to yellow by default, although this is configurable), and then fades away after a short interval. puff The target element increases in size slightly and then fades away. pulsate The target element's opacity is adjusted a specified number of times, making the element appear to flicker on and off. scale The dimensions of the target element are adjusted to increase or decrease its size. shake The target element is shaken a specified number of times. This effect is similar to the bounce effect with the key difference that the distance of the shake remains the same on each iteration of the animation. size The dimensions of the target element are adjusted to increase or decrease its size. This effect is almost identical to scale. slide The target element is made to slide in or out of view, horizontally or vertically. transfer The outline of the specified element is transferred to another element on the page. Using the effect API jQuery UI introduces the effect() method which can be used to trigger any of the effects listed in the previous table. The effect() method's usage pattern is as follows: jQuery(elements).effect(effect name, [configuration], [duration], [callback]); The name of the effect that we would like to use is always the first argument of the effect() method. It is supplied in string format. Each effect has custom configuration options that can be set to control how the effect displays. These options are set in a configuration object which is passed to the effect() method as the second argument, following the name of the effect. We can also supply a duration for the effect as an argument. As with standard jQuery animations, we can supply either an integer representing the duration of the effect in milliseconds, or one of the strings slow or fast. If no configuration is required, the duration may be passed to the effect() method as the second argument. If no duration is supplied, the default duration of 400 milliseconds will be used. [ 140 ]
- Page 110 and 111: Pop quiz - using slideToggle 1. Wha
- 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: Extended Animations with jQuery UI
- Page 163 and 164: Extended Animations with jQuery UI
- Page 165 and 166: Extended Animations with jQuery UI
- Page 167 and 168: Extended Animations with jQuery UI
- Page 169 and 170: Extended Animations with jQuery UI
- Page 171 and 172: Download from Wow! eBook Extended
- Page 173 and 174: Extended Animations with jQuery UI
- Page 175 and 176: Extended Animations with jQuery UI
- Page 177 and 178: Extended Animations with jQuery UI
- Page 179 and 180: Extended Animations with jQuery UI
- Page 181 and 182: Extended Animations with jQuery UI
- Page 183 and 184: Extended Animations with jQuery UI
- Page 185 and 186: Extended Animations with jQuery UI
- Page 187 and 188: Extended Animations with jQuery UI
- Page 189 and 190: Extended Animations with jQuery UI
- Page 191 and 192: Extended Animations with jQuery UI
- Page 193 and 194: Extended Animations with jQuery UI
- Page 195 and 196: Extended Animations with jQuery UI
- Page 197 and 198: Extended Animations with jQuery UI
- Page 199 and 200: Extended Animations with jQuery UI
- Page 201 and 202: Full Page Animations Can we animate
- Page 203 and 204: Full Page Animations display:block;
- Page 205 and 206: Download from Wow! eBook Full Page
- Page 207 and 208: Full Page Animations Have a go hero
- Page 209 and 210: Full Page Animations 4. Save this f
[ 139 ]<br />
Chapter 6<br />
The download builder shown in the previous screenshot gives us everything we need to run<br />
any subset <strong>of</strong> the library components.<br />
All we'll be using in this chapter are the effects, so when we download a package we should<br />
only select the components found in the effects subsection at the left. We don't need to<br />
include a theme, and we don't even need to include the library core. The effects can be<br />
used completely independently <strong>of</strong> the rest <strong>of</strong> the library; all we need is the effects Core file<br />
and the individual effects we require. Make sure all <strong>of</strong> them are selected and download<br />
the package.<br />
The package will give us everything we need to use the components we've selected,<br />
including a copy <strong>of</strong> the latest stable release <strong>of</strong> <strong>jQuery</strong>, so when using <strong>jQuery</strong> UI, <strong>jQuery</strong><br />
itself does not need to be downloaded separately.<br />
All <strong>of</strong> the JavaScript for each selected component is combined and compressed into a single<br />
file by the download builder, and any functional CSS or theme files will be combined into<br />
a single stylesheet. We don't need any <strong>of</strong> the theme files for working with the effects, but<br />
ensure the .js file from the archive provided by the download builder goes into our<br />
js folder.<br />
A new template file<br />
The examples in the remainder <strong>of</strong> this chapter will be short, mostly image-based examples<br />
that illustrate each effect in turn, so it makes sense to use a slightly different template file<br />
for them. Create a new template file by adding a reference to the <strong>jQuery</strong> UI source file<br />
directly after the <strong>jQuery</strong> one just before the closing tag. We won't be using any<br />
HTML5 elements in this chapter so we can safely remove the link to shiv.js in our new<br />
template file.<br />
The new effects added by <strong>jQuery</strong> UI<br />
<strong>jQuery</strong> UI gives us 14 new predefined animations to use in our pages; these are listed,<br />
together with a brief description <strong>of</strong> their usage, as follows:<br />
<strong>Animation</strong>s Description<br />
blind The target element is shown or hidden by rolling it down or up like a window blind.<br />
bounce The target element is bounced horizontally or vertically for a specified number <strong>of</strong><br />
times.<br />
clip The target element is shown or hidden by moving opposing edges in towards the<br />
center <strong>of</strong> the element, or out to its full width or height.<br />
drop The element appears to drop onto or <strong>of</strong>f <strong>of</strong> the page in order to show or hide it<br />
respectively.