| JQuery Background Menu |
|
|
|
| Written by Andrew Lechlak |
| Sunday, 11 October 2009 04:44 |
|
This is one neat little idea. I used this actually in putting two jquery menus on the same page. I wasn't sure if they would conflict in timing or if I could combine them into the same menu. Well you can. No little tricks needed. This was one of the first scripts I used when I was starting to explore the javascript libraries more. http://snook.ca/archives/javascript/jquery-bg-image-animations/
After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too. Changing the position of the background image felt to be the best approach to creating the type of effect we're looking for (and I'm not the first to think so: see the examples at the end of this article). jQuery is a great library for this type of task but out of the box, it can't animate background position properly because of the need to animate two values instead of just one (too bad not all browsers implemented the non-standard background-position-x and -y like Internet Explorer). Grab the latest version (1.0.2 as of this writing) of the Background-Position plugin. Previous versions didn't support negative or decimal values properly. |




