jQuery 滑动动画不起作用

Question

我有三个 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").click(function () {
        $("div.first").animate({
            left: "-=200px"},
            {duration: "fast",
            complete: function () {
                $("div.first").removeClass("first").addClass("third").animate({left: "+=350px", top: "+=60px"}, "fast");
            }
        });
        $("div.second").animate({
            left: "-=24px", top: "-=30px"},
            {duration: "fast",
            complete: function () {
                $("div.second").removeClass("second").addClass("first");
            }
        });
        $("div.third").animate({
            left: "-=24px", top: "-=30px"},
            {duration: "fast",
            complete: function () {
                $("div.third").removeClass("third").addClass("second");
            }
        });
    });

我可以让 div.first 移动到侧面和后面。但现在我无法让类(class)保持不变。不断发生的事情是 div.second 将删除它的类并在动画中添加 .first，但是当动画完成时，它的行为就像它仍然有一个 .second 类。

Answer 1

这种编码风格非常低效。

使用这样的东西，它适用于每个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");        

});

Demo