jQuery div拼圖

Question

我在網站上有三欄。每列都有信息div（大約20-30列），Id命名爲left-a..z，center-a..z，right-a..z。我需要從中間欄和右側欄中隱藏一些不重要的div，並將左側欄中的一些div放到中間欄或右側欄。

我通過這種方式解決這個問題：

Fiddle

$(function(){ 
    $("#wrapper > #right1").fadeOut(1000).attr('id','right1-chg'); 
    $("#wrapper > #left-name").fadeOut(1000).attr('id','right1'); 
    $("#wrapper > #right1").fadeIn(1000); 

    $("#wrapper > #right2").fadeOut(1000).attr('id','right2-chg');; 
    $("#wrapper > #left-surname").attr('id','right2'); 
}); 

$(function(){ 
    $(".click").click(function(){ 
    $("#wrapper > #right1").attr('id','left-name'); 
    $("#wrapper > #right1-chg").attr('id','right1').fadeIn(3000); 
    $("#wrapper > #left-name").fadeIn(1000); 

    $("#wrapper > #right2").attr('id','left-surname'); 
    $("#wrapper > #right2-chg").attr('id','right2').fadeIn(3000); 
    $("#wrapper > #left-surname").fadeIn(1000); 
    $(".click").hide(); 
}); 

}); 

但是：

1. 這似乎不是最好的解決辦法。我怎樣才能編寫更具可讀性的代碼？
2. 移動另一個div後如何將底部div移動到釋放的空間？你可以看到＃左手機這個問題（我認爲一樣在我的代碼，但它產生了大量的代碼行）

Answer 1

我改變代碼：

([http://jsfiddle.net/dimaomni/SThaQ/8/][1]) 

它的工作原理。謝謝