CSS properties made magical

The ,animate() function allows you to animate any numerical CSS property. Pixels px are the understood norm for most numerical property values, but you can specify em and % (percentage) units. Pretty much anything you can place in the handy .css() function, can be used in the .animate() function.

Additionally, rather than numeric values, you can add the shortcut strings "show", "hide", and "toggle" to any property. They will essentially take the value from 0 to 100, or vice versa, or toggle from 0 or 100 to the opposite number for you.

Let's take a look at a quick example of this clever function. Remember, you'll want to place any jQuery scripts you write inside the document ready function:

jQuery(function(){//code here}); also inside <script> tags, so that your jQuery will launch when the DOM has finished loading:

jQuery('.post p').animate({ fontSize: '140%', border: '1px solid #ff6600',}, 3000);

This snippet will animate all .post p paragraph tags on the page, increasing the font size and adding a border.

You'll notice that I added a border property that does not have a single numeric value. You'll also notice that when you test this code on your site, the border does not animate in; instead, it just appears at the very end as the animation completes. Adding CSS properties that are not basic numeric values (like borders or background color, hex values) will not animate, but you can add all CSS properties using the .animate() function, which will act like the .css() function once it's completed running. This is probably not the best way to add regular CSS properties, but if you're animating something anyway, just know you can add other non-numeric CSS properties, they just won't animate.

Your property doesn't work?

You probably noticed this with the ,css() function as early as Chapter \1 2, Working with jQuery in WordPress already, but just in case you didn't: property names must be camel cased in order to be used by the .animate() and .css() function. It's a bit confusing as you're probably just thinking of them as properties that you'd use in an actual CSS stylesheet but you'll need to specify paddingBottom instead of padding-bottom and marginRight not margin-right.

Was this article helpful?

0 0
Blogging For Business

Blogging For Business

Download this Guide And Discover How Start And Run Your Very Own Successful Business Blog. Always Wanted To Start Your Own Blog?

Get My Free Ebook


Post a comment