jQuery滑動切換動畫連同其他元素

Question

我試圖實現滑動切換從左到右，反之亦然使用jQuery toggle()。

切換工作，但我希望div的下一個元素切換到平滑動畫平行於切換效果。

校驗碼我想：jsFiddle

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> 

jQuery的

$(".myButton").click(function() { 
    var effect = 'slide'; 
    var duration = 500; 
    $('#myDiv').toggle(effect, {direction: "left"}, duration); 
}); 

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不與切換效果平行移動。 只有在切換效果完成後才能移動。

請幫我解決問題。

Answer 1

我用animate()

看看這個jsFiddle

$(".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(); 
    } 
}); 
}); 

我已經修改了CSS的#myDiv並添加

overflow:hidden; 

編輯：

我已經修改，而不是「寬度」屬性

退房在這個jsFiddle

$(".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); 
});