jQuery幻灯片将动画与其他元素一起切换

我试图使用jQuery

toggle（）

实现从左到右的滑动切换，反之亦然

Toggle可以工作，但我希望下一个div元素是Toggle，以平滑地平行于Toggle效果设置动画

检查我尝试的代码：

HTML

<button id="button" class="myButton">Run Effect</button>

<div id="myDiv">
    <p>This div will have slide toggle effect.</p>
</div>
<div class="other_details">
    This should move parallel with re-size of div being toggled.  
</div>

CSS

#myDiv {
    color:Green;
    background-color:#eee;
    border:2px solid #333;
    text-align:justify;
    float:left;
    width:200px;
}
.other_details{
    float:left;
    font-weight:bold;
    width:200px;
    border:1px solid black;
    padding:5px;
    margin-left:2px;
}    

您可以在输出中看到，

“other_details”

div没有通过切换效果并行移动。它只有在完成切换效果后才会移动

请帮我找到解决办法

我使用了

animate（）

看看这个

我修改了

#myDiv

的CSS并添加了

overflow:hidden;

编辑：

我修改了“marginleft”属性而不是“width”属性

请在此查看更新版本

---

我想你必须将它们都包装到一个容器中，并将动画应用到该容器div中。@j809，谢谢你的宝贵评论。但我认为它会切换

。其他详细信息

div以及

#myDiv

。这是我不想要的。我只想

#myDiv

切换和

。其他详细信息应始终可见。为什么不使用jQuery.animate（）？（）@Izzy，说得好。但是我想如果有直接的功能可以使用
toggle（）
，那么我想为什么要手动
animate（）
。1+作为答案和努力。但我现在面临的问题是，它重新调整了
#myDiv
的大小，因此它的内容正在下降，它的高度也在增加，以适应内容（这显然会干扰我网站中的其他元素和响应能力）。我想要“移动幻灯片”效果，而不是“调整大小”。）我已经更新了答案，请检查这是否是您需要的：）非常感谢您的完美答案。这个比上一个短得多。所以我真的很喜欢你们提供的解决方案+1111 :)
$(".myButton").click(function () {
var effect = 'width';
var duration = 500;
//if the current width is 200px, then the target width is 0px otherwise the target width is 200px
var targetWidth = $('#myDiv').css("width")=="200px"?"0px":"200px";
//Check if the div was hidden then display it
if(!$("#myDiv").is(":visible")){
     $("#myDiv").show();   
}
$('#myDiv').animate({width: targetWidth},duration,function(){
    if($(this).css("width")=="0px"){
         $(this).hide();   
    }
    else{
     $(this).show();   
    }
});
});

overflow:hidden;

$(".myButton").click(function () {
var effect = 'width';
var duration = 500;
//get the outer width of the div
var divOuterWidth= $("#myDiv").outerWidth();
divOuterWidth+= 8; //the margin on the body element

var targetMargin = $('#myDiv').css("margin-left")==((-divOuterWidth)+"px")?"0px":(-divOuterWidth)+"px";

$('#myDiv').animate({marginLeft: targetMargin},duration);
});