左侧带有 z-index 的 Jquery 动画答案

【问题标题】：Jquery animate on left with z-index左侧带有 z-index 的 Jquery 动画
【发布时间】：2012-04-05 00:08:59
【问题描述】：

单击（动画）时向左滑动并使用 z-index 移到最后。
下面的例子解释了我的问题。我需要为这些盒子设置动画。

我做错了什么？

$('.next').live("click", function() {
    $('#page').animate({ left: '-=700' }, 600, function() {
        $('.paper-three').css('z-index', '120');
        $('.paper-two').css('z-index', '130');
        $('.paper-one').css('z-index', '110');
        $('.paper-one').animate({ left: '+=700' }, 600);
    });
});

【问题讨论】：

请在您的问题中包含所有相关信息。指向其他页面的链接可能会失效，因此您的问题将无法回答。
您的代码完全错误。你想做什么
首先要注意的是您多次使用id="page"。无论代码的其余部分如何，这最多只会导致意外行为。您可能希望使用唯一 ID 或类。
@Yorgo 我注意到，我试图像旋转木马一样滑动盒子
@Yogo 我已经编辑了代码。感谢您的提示

标签： jquery jquery-animate slide

【解决方案1】：

我认为您正在以复杂的方式处理这个问题（尤其是关于 css）：

看看这个：

html（注意倒序）

<div id="slide-pages">
  <div class="buttons">
    <div class="prev"> &lt; </div>
    <div class="next"> &gt; </div>
  </div>

  <section class="paper-three page">
    <div><h1>THREE</h1></div>   
  </section>

  <section class="paper-two page">
    <div><h1>TWO</h1></div> 
  </section>

  <section class="paper-one page">
    <div><h1>ONE</h1></div>
  </section> 
</div>

代码执行以下操作：

滑出最后一页（在代码中！，由于position: absolute，视觉上它将是第一页）
将其作为第一页插入
滑回

这样您就完全不必处理 z-index 了。

(function () {
  var running = false;

  $('.buttons .next').on('click', function() {
    if (!running) {
      running = true;
      $('#slide-pages').find('.page').last().animate({left: '-=700'}, 600, function() {
        $(this).insertAfter('#slide-pages .buttons').animate({left: '+=700'}, 600, function () {
          running = false;
        });
      });
    }
  });

  $('.buttons .prev').on('click', function() {
    if (!running) {
      running = true;
      $('#slide-pages').find('.page').first().animate({left: '-=700'}, 600, function() {
        $(this).appendTo('#slide-pages').animate({left: '+=700'}, 600, function () {
          running = false;
        });
      });
    }
  });
}());

css

这不是你的 CSS，所以你可能需要稍微改变一下。我只是想表明你可以用更少的代码来做。例如。不要重复类似的属性。

#slide-pages {
  position: relative;
  width: 662px;
  margin-top: 10px;
}

#slide-pages .buttons .button {
  position: absolute;
  top: 0;
  color: #fff;
  cursor: pointer;
  background: #000;
  height: 34px;
  width: 18px;
  z-index: 100;
}

#slide-pages .buttons .next {
  right: 60px;
}

#slide-pages .buttons .prev {
  left: 30px;
}

#slide-pages .page {
  position: absolute;
  text-align: center;
  width: 620px;
  height: 60px;
}

#slide-pages .paper-one {
  background: #f00;
}

#slide-pages .paper-two {
  background: #333;
  left: 20px;
  top: 20px;
}

#slide-pages .paper-three {
  background: #ccc;
  left: 40px;
  top: 40px;
}

演示：http://jsfiddle.net/3wfnN/3/

【讨论】：

感谢耀西。如何避免双击？我的意思是如果我点击两次动画刹车。停止？
谢谢，但是如果你点击下一个和上一个，动画就会变得疯狂。活动类也这样正确吗？
@DD77 再次更新。现在两个按钮都工作了，如果当前正在运行翻页，则不会启动新动画。 jsfiddle.net/3wfnN/3
ACTIVE 类容易实现吗？
会的。但你实际上并不需要一个。 #slide-pages .page:last-child 应该足够了（因为最后一个孩子总是最上面的那个，因此是活动页面）。

【解决方案2】：

试试这个。

http://jsfiddle.net/Q6Czh/42/

我解决了一些问题。但你应该努力工作

【讨论】：

在我的第一条评论中，我应该写：请在您的问题和答案中包含所有相关信息。指向其他页面的链接可能无效，因此您的问题无法回答。