jQuery slide - divs aren't sliding in next to each other

Question

I'm using jQuery's slide effect to transition between elements. It'll be easiest to show you the jsfiddle

The menu links don't do anything. If you click on the "Details" link, you can see the problem. I'm attempting to use "slide" to simultaneous show a new div, and hide the old one - the problem is that the new div doesn't slide in next to the old one - it slides in next to and underneath it and then suddenly pops into the correct position at the end of the animation. It should be pretty clear what effect I'm aiming for - I want the divs to kind of "push" each other to the side like you'd see in a slideshow. What am I doing wrong :\

I'm able to adjust the CSS and/or markup and/or JS as necessary to make this work right.

Hmm, that only appears to (partly) work because the 2nd div's animation is so slow that by the time it's visible, the original div is already gone. For one thing, the second div is sliding in from the wrong direction - but you can still see the problem for a fraction of a second before the first div is gone; they're being pushed on top of each other. Then it disappears and the slow div comes in. But that's not the effect I'm going for :| I want them to slide right next to each other, moving the same direction, at the same speed. — nzifnab, Mar 16 '14 at 00:26

score 1 · Answer 1 · answered Mar 16 '14 at 12:59

Do you mean, like this?

jsFiddle

HTML:

<div id='container'>
    <a href='#' class='button'>Click</a>
    <div class='show left'>I'm showing!</div>
    <div class='hide right'>I was hidden, but now I showed.</div>
</div>

CSS:

.button{
    padding:5px;
    background:#eee;
    display:block;
    text-decoration:none;
    clear:both;
    text-align:center;
}
#container{
    width:350px;
    border:1px solid black;
}
#container:after{
    content:"";
    display:block;
    clear:both;
}
.left{
    float:left;
    padding:3px;
}
.right{
    float:right;
    padding:3px;
}
.hide{
    display:none;
}

Javascript:

$('.button').click(function(e){
    e.preventDefault();
    $('.left').toggle('slide',{'direction':'left'},500);
    $('.right').toggle('slide',{'direction':'right'},500);
});

Almost, except this has the same problem. It appears to work in your version because they don't slide *all* the way. This is yours updated, with each div being 100% width: http://jsfiddle.net/f3Uv7/1/ — nzifnab, Mar 16 '14 at 22:46

jQuery slide - divs aren't sliding in next to each other

1 Answers1