jquery - クリック時にdiv画像の配列を特定の位置に移動します

Question

DIVで囲まれた画像の配列があります

コード

<div id='brand'>
   <a href='#brand'><img src='brand.jpg' /> </a>
</div> 

<div id='fashion'>
   <a href='#fashion'><img src='fashion.jpg' /> </a>
</div> 

<div id='trend'>
   <a href='#trend'><img src='trend.jpg' /> </a>
</div> 

<div id='latest'>
   <a href='#latest'><img src='latest.jpg' /> </a>
</div> 

//表示は次のようになります

---

   BrandImage      FashionImage      trendImage     latestImage

---

いずれかの画像をクリックすると

特定のレイアウトが必要です（例：trendImageがクリックされました）

               BrandImage     FashionImage     latestImage



 trendImage      Text About Image Clicked

---

私は実際にJqueryから始めているので、クリックした画像を開始位置にアニメーション化し、その画像に基づいてテキストを表示し、他の画像を上に移動する方法についてはあまり考えていません。

-更新

コードを更新し、JSFIDDLEとして作成しました

JSFIDDLE

これで、divを最初にクリックすることができますが、それをアニメーション化して他のダイビングを上に移動し、クリックしたリンクに基づいてテキストを表示する必要があります

Answer 1

このフィドルを試してください：http：//jsfiddle.net/KjveG/