02.06.2013 Views

jQuery 1.4 Animation Techniques - Index of

jQuery 1.4 Animation Techniques - Index of

jQuery 1.4 Animation Techniques - Index of

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

In the previous screenshot we can see that the element is now twice its original size.<br />

[ 235 ]<br />

Chapter 9<br />

The previous code symmetrically scales the target element along both the x and y axes.<br />

These values are unit-less in all supporting browsers, and the value 0 cannot be specified.<br />

Integers or floating-point numbers may be provided, and the scaling may be asymmetrical<br />

if necessary.<br />

An interesting effect <strong>of</strong> scaling is that providing negative values cause the element to be<br />

reversed, and not shrunk, as we may intuitively surmise. So if we were to provide -2 and -2<br />

as the first and fourth values in the previous code-snippet, the element would be reflected<br />

both vertically and horizontally, as well as being made twice its original size. We can even<br />

supply a combination <strong>of</strong> positive and negative values for this type <strong>of</strong> transformation.<br />

A reflected element would appear like this:<br />

The element is reversed along both its x and y axes, as if it were being viewed upside<br />

down in a mirror. This could be hugely useful if, for example, we were implementing<br />

pure-CSS reflections.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!