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.

Managing <strong>Animation</strong>s<br />

Passing an empty array to the queue() method will also<br />

clear the queue.<br />

Useful properties <strong>of</strong> the <strong>jQuery</strong> object<br />

The <strong>jQuery</strong> object contains a couple <strong>of</strong> properties that we can set which can be useful when<br />

creating animations. The <strong>jQuery</strong> (or $) object contains an fx property, which itself contains<br />

two properties related to animations which we can manipulate.<br />

This fx object is not to be confused with the fx queues that are created by default for any<br />

element that has more than one animation method called on it in a chain. These individual<br />

fx queues do not contain the same properties that the <strong>jQuery</strong> fx property contains.<br />

Globally disabling animations<br />

One property <strong>of</strong> fx that we can set is the <strong>of</strong>f property. This property contains a Boolean<br />

that is set to false by default, but which we can set to true to globally disable all<br />

animations on a page. The property is set using the following syntax:<br />

<strong>jQuery</strong>.fx.<strong>of</strong>f = true;<br />

That's all we do need to do. If this is set at any point in our script, all elements that have<br />

animation methods attached to them will be set to their final state, as if the animation<br />

had already completed.<br />

Changing the default frame rate<br />

The other property <strong>of</strong> <strong>jQuery</strong>'s fx that we can set is the interval property. This property<br />

accepts an integer and specifies the number <strong>of</strong> milliseconds between each frame <strong>of</strong> the<br />

animation. By default, it is set to 13, so an animation will have a frame-rate <strong>of</strong> about 76<br />

frames per second.<br />

To set this property, we just supply a different integer:<br />

<strong>jQuery</strong>.fx.interval = 28<br />

Setting the property to 28 like this would make the animation run at about 35 frames per<br />

second, making animations run almost half as smoothly.<br />

Note that animations will still run over the same duration <strong>of</strong> time (whether that is the default<br />

400 milliseconds, or another value set with the duration argument <strong>of</strong> an animation method)<br />

regardless <strong>of</strong> what this property is set to. However, an interval value that is lower, and<br />

therefore has a higher number <strong>of</strong> frames per second, will make animations appear smoother.<br />

[ 70 ]

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

Saved successfully!

Ooh no, something went wrong!