I'm redesigning my company website and we're going pretty effects-heavy with jQuery, Flash, etc. So far I haven't had much of a problem doing any of this, but two minor issues keep cropping up and I've had nothing but success after asking people here, so here goes:
Development page in question: (URL removed)
First Issue
Click on the green arrow in the top nav under "Results". This is supposed to slide out a menu from right to left. It behaves as it should in Firefox, but IE and Safari start the slide left animation way over in the middle of the page and then shift the menu back where it belongs. I have no idea why it's doing this since the menu itself is absolutely positioned in the CSS. Another issue is once the menu is open and you attempt to close it (using the similarly colored arrow), it transitions as it should in Firefox, but then reappears once the transition is complete. In IE and Safari, the menu disappears permanently, but the animation again starts in the middle of the page.
Second (sorta) Issue
If this slide thing can be worked out, I'd like to apply a similar effect to the bottom "buckets", which slide up and down as you click on the gray arrow box beneath them. Currently, I'm hacking at the .animate function in jQuery to first increase the height, then apply a negative margin, like so:
$('#footer-bucket1')
.animate({ height: '392px' }, 300)
.animate({ marginTop: '-306px'}, 300)
.addClass('bucket-open');
When I applied a slide up transition to it, I could see that the box was getting bigger, but in a downward direction, off the page (which has overflow: hidden applied to it). Is there a way to specify that the box literally slide up to reveal the content, much like it does now? Thanks in advance!