[jQuery] Re: help with an animation effect

Sorry, my last post was incomplete.
I've changed the code to keep it cleaner and more relevant to your
question.
Please, keep in mind I'm not a developer and the code is probably not
up to snuff. :P

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 ananimationeffectand 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-overeffecton the small tab at the
> bottom which slightly reveals the content (width a nice slideyeffect). 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 slideyeffectagain), 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