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向侧边移动并返回。但是现在我无法使类保持更改。发生的情况是div.second将删除其类并在动画中添加.first，但完成动画后，它仍然像具有.second类一样运行。

- Jake Zeitz

---

你能同时展示一些标记吗？ - Starx

我添加了我正在使用的基本HTML和CSS。 - Jake Zeitz

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");        

});

演示

- Starx

---

我很难理解这段代码在做什么。我应该提一下我的 div 元素有 id，这可能会影响到该代码的工作方式。 - Jake Zeitz

@JakeZeitz，我尽力回答了我所理解的问题。请查看更新和演示。 - Starx

@JakeZeitz，请给我们展示一下你所说的演示文稿。 - Starx

@Starx，啊我只是在试图简化它，我的代码实际上并不使用整数。现在我正在尝试在单击外部按钮时使div交换位置...请查看我在演示中尝试的内容http://jsfiddle.net/bz6cH/2/。我希望有两个类current和notcurrent，这样我可以让许多div被访问并切换。 - Jake Zeitz

@Starx，你可能也想看一下我的实际网页，以更好地了解我想要发生的事情：http://www.guitarseeker.com/guitars/。现在我正在使用的代码非常低效，在添加更多面板时会使它变得更加耗时。 - Jake Zeitz