jquery geeks
- Started
- Last post
- 12 Responses
- moural
This is probably a long shot, but anyway...
I have 5 images on a page scaled at 20% each, so together, they fill the entire window. When I hover over one, I'd like it to expand to 60%, while the others compress to 10%. I can do this fine with the css attribute, but I'd like for it to animate. Problem is, when I apply an animation, all 5 images scale at a different rate, regardless of the speed I set. The result is that one of the images either jumps below, or they compress too much, leaving some white space on the side of the page while the animation finishes.
So, is it possible to do this while maintaining a fully-filled window? Basically, having the 5 images maintain a 100% presence as the animation runs?
Thanks.
- janne760
why not set them as bg's? and scale the divs? or does that kill your intentions?
- moural0
I've tried. It doesn't change anything. The problem is that there are 5 animations running at one time, so the animations kind of choke and they don't scale at the same rate.
- ********0
how about using a jquery carousel plugin?
- moural0
Thanks, but the problem with a carousel plugin, and/or the link above, is that it uses fixed widths. This isn't difficult to do with, or without, a plugin.
I'm using percentages, so if the animations aren't in sync, the whole thing pulls off the edge of the page.
I'm thinking I'll just have to do something else...
- acescence0
then use pixel dimensions and calculate widths based on viewport size. add an onresize handler to resize them if the user changes the size of their browser window
- welded0
Have you tried absolutely positioning the images? Sounds like you're floating them or just the default inline, but if they're absolute they will overlap a bit, but won't shove one another around.
- BettyBotox0
Any problems using Flash for this? It would be pretty straightforward..
- nnnghhdshjkhc vulisehuh yg hvcul inuyim u ioh NNNNNGHHh ggruugh aahk i hj uh h jh k;h kjlh GODFUKKNairn
- ********0
do you have a test case online?
- moural0
Here's a quick mock up of what I'm talking about.
http://www.elepheight.com/mock/u…
I just included the expanding animation for the first div, but you get the idea...
- moural0
Fixed it!
Thanks for all the help and suggestions, though. Much appreciated.
- Stugoo0
so your looking for an accordian?
http://designreviver.com/tutoria…