Slide in/out with jquery

I've my divs as

<div id="summary" style=" width: 900px; margin: 0 auto;" >
    HTML content
</div>
<div id="details" style=" width: 900px; margin: 0 auto; display: none;" >
    Detail content
</divs>

My jquery code is like

$('#button').click( function() {
    $('#details').show('slide', { direction: 'right' }, 1000);
    $('#summary').hide('slide', { direction: 'left' }, 1000);
});

While implementing this, the div#summary slides out on the开发者_StackOverflow社区 left touching the edge of the monitor display & the div#details slides in from the right but not from the edge of the monitor display.

I want the div#details to slide in from the extreme right so that it looks like the div is sliding in from outside the screen.

How will I do that?

You need to position it off the screen first, and try animating instead of using the slide function:

HTML:

<div id="summary" >
    HTML content
</div>
<div id="details">
    Detail content
</div>

<div id="button">click me</div>

CSS:

body {
    overflow:hidden;
}

div#button {
    cursor:pointer;
}

div#details {
    position:absolute;
    left:2000px;
    top:100px;
    width:200px;
    background-color:#CCC;
}

div#summary {
    position:absolute;
    left:-500px;
    top:50px;
    width:200px;
    background-color:#CCC;
}

JQuery:

$('#button').click( function() {
    $('#details, #summary').animate({left:'200px'});
});

Working example: http://jsfiddle.net/7e92Y/