Sorry, my last post was incomplete.
I've changed the code to keep it cleaner and more relevant to your
question.
You will need to restructure the CSS to fit your page.
HTML
<div id="container">
<div id="slider">
CONTENT HERE
</div><!-- end slider -->
<div id="sliderSwitch">
<span class="switch">show</span>
<span class="switch" style="display:none;">hide</span>
</div><!-- end sliderSwitch -->
</div><!-- end container -->
CSS
#container {
width: 180px;
min-height: 21px;
top: 0;
right: 40px;
font-size: 10px;
line-height: 20px;
position: absolute;
z-index: 5;
}
#slider {
width: 100%;
height: auto;
display: none;
background: #5e574a;
}
#sliderSwitch {
height: 21px;
width: 100px;
cursor: pointer;
line-height: 24px;
}
jQuery
// sliding box
$("#sliderSwitch").click( function() {
$("#sliderSwitch .switch").toggle(); //
toggle text
$("#slider").slideToggle("slow");
// show / hide box
});
});
I hope it helps
- Leo
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
