破壞與jQuery

Question

我一直在四處尋找這個div是順利，但我還沒有找到它，我有2周的div表TDS：

__________ __________ 
|   | |   | 
| Div 1 | | Div 2 | 
|   | |   | 
|_________| |_________| 

我是爲了降低DIV1的寬度，而漸行漸遠的內容並在最後銷燬它，然後我想讓它重新出現在div2上，這樣我就可以發佈不同的內容。

Answer 1

你可以使用jQuery的animate函數。

$('#div1').stop().animate({ 
     width:0, 
     opacity:0 
    }, 1000, function() { 
     $(this).remove(); 
    }); 

這首先呼叫stop()停止任何現有的動畫。然後在1000毫秒內將元素的寬度和不透明度設置爲0。動畫完成後，終於在#div1上調用remove()。

如果您希望它在重新出現後立即致電remove()是不必要的。你會想在這種情況下使用appendTo()：

... 
    }, 1000, function() { 
     $(this).appendTo($(this).parent()); 
     /* Remember that the width and opacity are still 0 here, so you'll need to revert the animation when re-displaying it */ 
    }); 

這是假設你的HTML標記是沿着線的東西：

<div> 
    <div id="div1"></div> 
    <div id="div2"></div> 
</div> 

這裏是一個JSFiddle demo。