jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
3. Save this as slide.html. Next create the following stylesheet: #image { position:relative; float:left; } #image img { margin-bottom:-5px; } #image div { display:none; width:100%; padding:10px 0; position:absolute; left:0; bottom:0; top:auto !important; text-align:center; font-style:italic; background-color:#000; color:#fff; } 4. Save this file as slide.css. [ 169 ] Chapter 6 5. When we view the page we should find that the caption is displayed as soon as we move the mouse over the image, and then removed when we move the mouse off it: In the previous screenshot we see the caption sliding out from the left edge of the container. What just happened? The image and caption are held in a container so that the caption can be positioned accurately. We use jQuery's hover() method, which allows us to attach event handlers for both the mouseover and mouseout events, to show the caption by sliding it in, or hide it by sliding it out.
Extended Animations with jQuery UI We don't need any additional configuration in this simple example, but we do need to manage the queue effectively to stop a build up of animations if the mouse pointer is moved on and off the image repeatedly, which we handle with the stop() method. The scale effect The scale effect is very similar to the size effect that we looked at earlier, and as we saw, several effects actually require this effect as a dependency. The main difference between this effect and the size effect is that with scale, we can only specify a percentage that the target element should be scaled to, not supply exact pixel sizes. Configuration options The scale effect has more configuration options than any other effect added by jQuery UI. These options are listed in the following table: Option Default Usage direction "both" Sets which axis the element is scaled along. from none Sets the starting dimensions of the element. origin ['middle', 'center'] Sets the vanishing point of the element if it is being hidden, or the point from which it grows if it is being shown. percent 0 Sets the percentage by which the element will grow or shrink. scale "both" This option sets whether the whole box of the element (including border and padding CSS values) is scaled, just the content, or as in the default, both. Time for action – scaling an element It's common practice on an image-heavy site to show a set of thumbnail images which link to a full-sized image which is displayed when the image is clicked, either inline in a modal pop up, or in a separate window. In this example we'll create a thumbnail image that scales to a full-sized version when clicked. 1. Add the following few elements to the of the template file: [ 170 ]
- 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
- 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: 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
- Page 211 and 212: Full Page Animations 2. The bgpos c
- Page 213 and 214: Full Page Animations nav ul { margi
- Page 215 and 216: Full Page Animations screensize = {
- Page 217 and 218: Full Page Animations What just happ
- Page 219 and 220: Full Page Animations The second sec
- Page 221 and 222: Full Page Animations Pop quiz - cre
- Page 223 and 224: Full Page Animations Time for actio
- Page 225 and 226: Full Page Animations Next we define
- Page 228 and 229: 8 Other Popular Animations This cha
- Page 230 and 231: [ 209 ] Chapter 8 } .slider #scroll
- Page 232 and 233: }), pointerText = "Use your pointer
- Page 234 and 235: [ 213 ] Chapter 8 In the previous s
- Page 236 and 237: prox.mousemove(function(ev) { goAni
- Page 238 and 239: Pop quiz - implementing proximity a
Extended <strong>Animation</strong>s with <strong>jQuery</strong> UI<br />
We don't need any additional configuration in this simple example, but we do need to<br />
manage the queue effectively to stop a build up <strong>of</strong> animations if the mouse pointer is<br />
moved on and <strong>of</strong>f the image repeatedly, which we handle with the stop() method.<br />
The scale effect<br />
The scale effect is very similar to the size effect that we looked at earlier, and as we saw,<br />
several effects actually require this effect as a dependency. The main difference between this<br />
effect and the size effect is that with scale, we can only specify a percentage that the target<br />
element should be scaled to, not supply exact pixel sizes.<br />
Configuration options<br />
The scale effect has more configuration options than any other effect added by <strong>jQuery</strong> UI.<br />
These options are listed in the following table:<br />
Option Default Usage<br />
direction "both" Sets which axis the element is scaled along.<br />
from none Sets the starting dimensions <strong>of</strong> the element.<br />
origin ['middle', 'center'] Sets the vanishing point <strong>of</strong> the element if it is<br />
being hidden, or the point from which it grows if<br />
it is being shown.<br />
percent 0 Sets the percentage by which the element will<br />
grow or shrink.<br />
scale "both" This option sets whether the whole box <strong>of</strong> the<br />
element (including border and padding CSS<br />
values) is scaled, just the content, or as in the<br />
default, both.<br />
Time for action – scaling an element<br />
It's common practice on an image-heavy site to show a set <strong>of</strong> thumbnail images which link to<br />
a full-sized image which is displayed when the image is clicked, either inline in a modal pop<br />
up, or in a separate window. In this example we'll create a thumbnail image that scales to a<br />
full-sized version when clicked.<br />
1. Add the following few elements to the <strong>of</strong> the template file:<br />
<br />
<br />
<br />
[ 170 ]