Hey all, I was faced with a challenge of displaying, within a main container, 10 panels 147px sq that have background images positioned the opposite of the panel position within the container. When a user was to click one of these it grows over time so each edge of the panel reaches the relative edge of the container at the same time. Not difficult I thought, bit of jQuery animation - easy :) But unfortunately the animation function doesn't support the repositioning of background images because it has 2 values to deal with so I then stumbled accross the backgroundPosition plugin - fantastic! However this didn't work either as the background image 'shook' as the div grew and repositioned itself so I tackled the problem head on and wrote my own functions called at a certain interval based on the time/iteration variables and this is what I came up with: http://uts1.core.je/default.html. Exactly what I was after and I thought I'd share the wealth for you all as jQuery is an outstanding framework!! Feel free to use it should you find a use and if you have any time to dissect my code you'll see a lot of the calculations are using ternary operators to get the right value - there may be a easier/better mathematical solution and I'd love to see any ideas/solutions to this problem. Hope you like it!
Cheers Rich
