Question

点击（动画）向左滑动，最后用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);
    });
});

Answer 1

试试这个。

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

我确定了一些事情。但是你应该继续努力

Answer 2

我认为你正在接近这个复杂的问题（特别是关于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>

<强> JS

代码执行以下操作：

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

这样你根本不需要处理z索引。

(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/

使用z-index在左侧创建Jquery动画

2 个答案: