Скользящая анимация jQuery не работает

Question

У меня есть три элемента, сложенных друг на друга, но смещенных, так что часть каждого элемента видна.Когда щелкает один из нижних элементов 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.

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

});

Демо