jQuery的滑動效果的同時爲格旁邊

Question

我有這樣的例子：

EXAMPLE

當您單擊按鈕中的紅色文字滑出左但問題是，在黃文當動畫完成時跳轉到新的位置。當紅色文字滑出時，黃色文本如何能夠「動畫化」以實時到達新的位置？

HTML：

<div id="1" style="float:left; color:blue"> 
    <a>THIS IS NUMBER 1</a> 
</div> 

<div id="2" style="float:left; color:red"> 
    <a>THIS IS NUMBER 2</a> 
</div> 

<div id="3" style="float:left; color:yellow"> 
    <a>THIS IS NUMBER 3</a> 
</div> 

<br/> 
<button id="btn">GO!</button> 

JS：

$("#btn").click(function() 
{ 
    $("#2").hide("slide", { direction: "left" }, 700); 
}); 

Answer 1

黃色文本是跳躍因爲jQuery被除去它上面的元件，並且頁被相應的調整。你可以嘗試這樣的事情能讓它更順暢：

$("#btn").click(function() 
{ 
    $("#2").hide("slide", { direction: "left" }, 700); 
    $("#3").slideUp('slow', function() { 
    // add anything else you want to do here for when this animation completes. 
    // if not, just use .slideUp('slow'); 
    }); 
}); 

這是未經測試，把我的頭頂部，但它應該讓你關閉，

或者嘗試使用.animate（）方法：

$("#btn").click(function() 
{ 
    $('#2').animate({"width": "toggle", "height":"toggle", "opacity": "toggle" }, "slow"); 
}); 

例子：http://jsfiddle.net/YG5rh/2/