jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
6 Extended Animations with jQuery UI jQuery UI is the official user interface library for jQuery and adds a suite of interactive widgets such as tabs and accordions, a series of interaction helpers such as drag and drop, and a comprehensive set of effects that extend those provided natively by jQuery. Over the course of this chapter, we'll be looking at the additional effects added by jQuery UI. Topics we'll cover include: Obtaining and setting up jQuery UI The new effects added by jQuery UI Using the effect() method Extending the show(), hide(), and toggle() methods Using easing with jQuery UI Animating an element's color Animated class transitions jQuery UI adds several new animation methods, as well as modifying several jQuery methods. The methods we'll be looking at in this chapter are: animate() addClass() effect() hide() switchClass() show() toggle()
Extended Animations with jQuery UI Obtaining and setting up jQuery UI jQuery UI is very easy to obtain and set up. There is an online tool that will build a custom download package for us containing just the parts of jQuery UI that we'll need. Due to the modular nature of jQuery UI it makes sense to minimize the code payload we use on any given web project and so the ability to include only the modules of code we intend to use helps us to minimize any impact on the visitor our code may have. The jQuery UI download builder can be found at http://jqueryui.com/download. The page is split into two sections with the components of the library listed at the left and the theme details at the right. The download builder has a certain amount of intelligence, and will ensure that any dependencies are automatically selected when we choose the components we require. [ 138 ]
- Page 106 and 107: [ 85 ] Chapter 4 } h2 { margin:0; p
- Page 108 and 109: [ 87 ] Chapter 4 The previous scree
- 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 161 and 162: 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
6<br />
Extended <strong>Animation</strong>s with <strong>jQuery</strong> UI<br />
<strong>jQuery</strong> UI is the <strong>of</strong>ficial user interface library for <strong>jQuery</strong> and adds a suite <strong>of</strong><br />
interactive widgets such as tabs and accordions, a series <strong>of</strong> interaction helpers<br />
such as drag and drop, and a comprehensive set <strong>of</strong> effects that extend those<br />
provided natively by <strong>jQuery</strong>.<br />
Over the course <strong>of</strong> this chapter, we'll be looking at the additional effects added by <strong>jQuery</strong> UI.<br />
Topics we'll cover include:<br />
Obtaining and setting up <strong>jQuery</strong> UI<br />
The new effects added by <strong>jQuery</strong> UI<br />
Using the effect() method<br />
Extending the show(), hide(), and toggle() methods<br />
Using easing with <strong>jQuery</strong> UI<br />
Animating an element's color<br />
Animated class transitions<br />
<strong>jQuery</strong> UI adds several new animation methods, as well as modifying several <strong>jQuery</strong><br />
methods. The methods we'll be looking at in this chapter are:<br />
animate()<br />
addClass()<br />
effect()<br />
hide()<br />
switchClass()<br />
show()<br />
toggle()
Change language