jQuery滑动动画不工作

我有三个div彼此堆叠，但偏移，以便每个div的一部分可见。当其中一个底部div被单击时，我希望顶部div被动画化并返回到底部的堆栈中，然后被单击的div将出现在顶部。到目前为止，我只有单击中间div时的代码，但我无法让它正常工作。我做错了什么？（我也意识到我写的代码可能很糟糕，这是我写的第一个jQuery代码。）

css非常简单：

    .first {
        z-index: 3;
    }
    .second {
        z-index: 2;
    }
    .third {
        z-index: 1;
    }

基本html如下所示：

    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>

---

我可以让潜水艇先移到一边再移回来。但现在我无法让课程保持不变。不断发生的事情是div.second将删除它的类并添加。首先在动画中，但当动画完成时，它的行为就像它仍然有一个类。second。

这种编码方式效率非常低

使用类似的方法，它适用于每个div

$("div").click(function() {
   var first = $(".first");
   var fleft = first.css("left");
   var ftop = first.css("top");           

   var $this = $(this);
   var tLeft = $this.css('left');
   var tTop = $this.css('top');
   var tClass = $this.attr("class");

   first.animate({
      left: tLeft,
      top: tTop
   }).attr("class", tClass);

   $this.animate({
       top: ftop,
       left: fleft
   }).attr("class", "first");        

});

---

你也可以展示一些标记吗？我添加了我使用的基本html和css。我很难理解这段代码在做什么。我应该提到，我的部门有id，这可能会改变它的工作方式。@JakeZeitz，我尽我所能回答。请参阅更新和demo@Starx-您使用

$（此）

4次。为了提高效率，应该在开始时使用

var$this=$（this）进行缓存啊，演示是关键。我正在慢慢地弄明白哈。谢谢。我现在有个新问题。如果我将可移动div封装在容器div中，我会得到非常奇怪的结果。有没有办法使可点击的div更具体？？
$("div").click(function() {
   var first = $(".first");
   var fleft = first.css("left");
   var ftop = first.css("top");           

   var $this = $(this);
   var tLeft = $this.css('left');
   var tTop = $this.css('top');
   var tClass = $this.attr("class");

   first.animate({
      left: tLeft,
      top: tTop
   }).attr("class", tClass);

   $this.animate({
       top: ftop,
       left: fleft
   }).attr("class", "first");        

});