Question

I’m maintaining a website that has full screen background photos, and a text panel on top of the photos.

Here’s the functionality I want to add:

Clicking “Hide text” button makes the text panel animate left off-screen, so that the visitors can see the whole background photo. The “Hide text” button, after being clicked, should fade out, and another button, “Show text” fades in in a different place. When “Show text” button is clicked, the text panel should animate from off-screen left back to its proper place. Simultaneously, “Show text” button should fades out, and “Hide text” button should fade in.

To rephrase it:

when #hideText is clicked,

aimate #mainPanel left off-screen, fade out #hideText, fade in #showText.

when #showText is clicked,

animate #mainPanel from its current position left off-screen to its proper place onscreen, fade out #showText, fade in #hideText

Could someone please show me how to do this with jQuery? I would be very grateful for actual code.

Answer 1

http://jsfiddle.net/dXSPa/

$('#hideText').click(function(){
    $('#mainPanel').animate({width:'toggle'},1000);
    $(this).fadeOut();
    $('#showText').fadeIn();
});
$('#showText').click(function(){
    $('#mainPanel').animate({width:'toggle'},1000);
    $(this).fadeOut();
    $('#hideText').fadeIn();
});
​

and html (just for an example)

<div id='mainPanel' 
      style='position:absolute; left: 0px; top: 50px; 
            border: 1px solid black; white-space: nowrap'>Main Panel</div>
<input type='button' id='hideText' value='Hide Text'
       style='position:absolute;left:0px'>
<input type='button' id='showText' value='Show Text' 
       style='display:none; position:absolute;right:0px;'>

if you do not like the width effect it can be easily modified for the slide out of the left side of screen, like this http://jsfiddle.net/3FwWV/

ps: for the button on the right – click on the button, not on the jsfiddle’s span with word ‘Result’