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类。

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

});

jQuery滑动动画不起作用

1 个答案:

Demo