左侧带有 z-index 的 Jquery 动画

Posted 2023-05-08

【中文标题】左侧带有 z-index 的 Jquery 动画

【英文标题】：Jquery animate on left with z-index

【发布时间】：2012-04-05 00:08:59

【问题描述】：

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

http://jsfiddle.net/Q6Czh/40/

我做错了什么？

$('.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 我已经编辑了代码。感谢您的提示

【参考方案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>​

js

代码执行以下操作：

滑出最后一页（在代码中！，由于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/

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

【讨论】：

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