Question

我使用jQuery slide效果在元素之间进行转换。最简单的方法是向您展示jsfiddle

菜单链接不做任何事情。如果您点击＆＃34;详细信息＆＃34;链接，你可以看到问题。我试图使用＆＃34; slide＆＃34;同时显示一个新的div，并隐藏旧的div - 问题是新的div不会在旁边滑动旧的div - 它在它旁边和下面滑动然后在动画结束时突然弹出正确的位置。应该很清楚我的目标是什么 - 我希望div能够实现＆＃34;推动＆＃34;彼此像你一样在幻灯片中看到。我做错了什么：\

我可以根据需要调整CSS和/或标记和/或JS，以使其正常工作。

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

jQuery幻灯片 - div不会相互滑动

1 个答案: