0

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 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?

1 Answer 1

5

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.