jquery - jQuery 幻灯片 - div 不会彼此相邻滑动

Question

我正在使用jQuery'sslide效果在元素之间进行转换。向您展示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.

Answer 1

你的意思是，像这样？

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);
});