Hi, Robert.
I've tackled this issue recently and I can post something that worked
out reasonably well for me.
I used it for a login box that slides down once the user clicks on the
tab. You should be able to restructure it to fit your site.
Please keep in mind I'm not a developer and the code is probably not
up to snuff.
HTML
<div id="container">
<div id="slidingPanel">
CONTENT HERE
</div><!-- end login-panel -->
<div id="loginSwitch">
<center>
<span class="switch">log in/register</span>
<span class="switch"
style="display:none;">close</span>
</center>
</div><!-- end login-switch -->
</div><!-- end login-container -->
On Jul 24, 12:40 pm, Sir Rawlins <robert.rawl...@thinkbluemedia.co.uk>
wrote:
> Morning all,
>
> I'm looking for some help with an animation effect and your thoughts
> on how best to achieve it. At this stage we simply have a graphical
> representation, we can splice the images up any way we like, I'm
> really looking for your suggestions.
>
> The first stage is just the basic static object:
>
> http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view...
>
> Then, we have a slight mouse-over effect on the small tab at the
> bottom which slightly reveals the content (width a nice slidey
> effect). On a mouse-out the tab would go back to it's static state.
>
> http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view...
>
> Thirdly, once the tab has been clicked it should pull out (nice slidey
> effect again), notice this isn't like the slideDown() effect, the
> bottom of the thing comes out first, as if it were a card being pulled
> out from behind another by hand. Also note that the text/icon on the
> tab has changed.
>
> http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view...
>
> Finally we have it's resting state once it's pulled out completely, a
> click would simply send it back up again the way it came.
>
> http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=view...
>
> Now this with any luck would degrade so that if JS was disabled then
> the tab would default to being fully pulled out so the content was
> exposed for anyone viewing the site without JS enabled.
>
> I'd imagine we'll be using the animate() method but this isn't
> something I've worked with before, I'd appreciate any help you can
> offer on how I should be structuring my HTML and JS for this.
>
> Thanks guys I appreciate it.
>
> Robert
