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 clicked）

               BrandImage     FashionImage     latestImage



 trendImage      Text About Image Clicked

---

我真的从 Jquery 开始，所以我真的不知道如何将点击的图像动画到起始位置并根据该图像显示文本并移动上面的另一个图像。

--更新

我已经更新了我的代码并创建为 JSFIDDLE

JSFIDDLE

现在我可以先点击 div 但我需要对其进行动画处理并将其他潜水移到上方并根据点击的链接显示文本

Answer 1

试试这个小提琴：http: //jsfiddle.net/KjveG/