javascript - jquery slide effect, hide one div and show another - Stack Overflow

admin管理员组

文章数量:1406177

I have this JSFIDDLE setup demonstrating my problem, I'm sure that it's a simple fix.

I am trying to slide out the blue div to the left, while sliding in the red div from the right, at the same time. The sliding animations are working how I want them to, however when the red div is sliding in it appears below the blue div. How can I get it to be positioned to the right of the blue div instead of appearing beneath it during the animation?

code:

$("#slide2").on('click', function(){
    $( "#blueDiv" ).effect( "slide", hideoptions, 1000);
    $( "#redDiv" ).effect( "slide", showoptions, 1000);                
});

I have this JSFIDDLE setup demonstrating my problem, I'm sure that it's a simple fix.

I am trying to slide out the blue div to the left, while sliding in the red div from the right, at the same time. The sliding animations are working how I want them to, however when the red div is sliding in it appears below the blue div. How can I get it to be positioned to the right of the blue div instead of appearing beneath it during the animation?

code:

$("#slide2").on('click', function(){
    $( "#blueDiv" ).effect( "slide", hideoptions, 1000);
    $( "#redDiv" ).effect( "slide", showoptions, 1000);                
});

• javascript
• jquery
• css
• html

Share Improve this question Follow asked Apr 23, 2014 at 22:17 A.O.A.O. 3,76366 gold badges3232 silver badges4949 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can use position: absolute to take them out of the flow and place them beside each other:

div > div
{
    position: absolute;
}

If you want to make it more specific to this div, you can use a specific selector:

#contentWrapper div
{
    position: absolute;
}

JSFiddle

http://jsfiddle/ggfA6/12

position: absolute

Both elements need to be absolutely positioned so that they don't occupy space in the flow.

本文标签： javascriptjquery slide effecthide one div and show anotherStack Overflow