Javascript 删除另一个元素时停止浮动div捕捉

我对JavaScript非常陌生，如果这是一个愚蠢的问题，我深表歉意

我想制作一个滚动股票代码样式的元素。我查阅了Mootools并使用它的FX.Transitions，我可以让Div元素很好地滑动

它的工作原理是在屏幕中央有一个710px宽的div，我称之为视口。在这个div里面是另一个更宽的div，子div都向左浮动。当用户单击“下一步”按钮时，我将当前查看的项目和下一个项目的css

left

属性设置为

-710px

，使用mootools将它们很好地滑动。因此：

• 左侧位置：不可见，用户已查看并单击“下一步”的旧幻灯片
• 中心位置：此时屏幕上显示的内容
• 正确位置：不可见，用户的下一张幻灯片

用户看到旧元素滑出，新元素滑入。所有这些都很有效

但是，在下一次单击时，我想删除用户已经看到的旧幻灯片（但目前不可见）。我查看了如何在JavaScript中实现这一点，它工作得很好。但在我删除它的那一刻，当前的中心元素捕捉到左侧（而不是滑动），因为它得到了

左侧：-710px

以将其带到中心，并且具有

浮动：左侧

我可以通过在删除后设置

left:0px

来解决这个问题，这会将它放回它所属的中心位置，但我担心在速度较慢的浏览器上，用户会看到元素向左捕捉的闪烁，然后在我纠正它时重新出现

我希望这是有意义的-如果没有，我可以上传代码的地方

是否有一种方法可以删除最左侧的旧元素并防止其他元素移动？比如，我可以告诉浏览器“请暂时不要重画”？还是我问了一个愚蠢的问题，删除和更正之间的时间太快，用户永远不会注意到闪烁？还是有更聪明的方法来布局元素

谢谢

---

编辑：这里的示例：jsfiddle.net/Az5Lg

一般来说，如果您在删除元素的同时进行位置更改（即两个语句之间没有计算和其他代码），那么我预计它会太快而不易被注意到，尽管您总是可以通过测试找到答案

如果你真的想避免这种情况，你必须做一些渐进式的改变。我不知道mootools在动画方面做了什么(http://mootools.net/docs/core/Fx/Fx.Tween 看起来像你想要的，但我不使用mootools-我假设你已经在使用这个或类似的工具来制作动画）但是如果你能让它将被移除的div的宽度设置为0，而不是将整个部分滑动（因此左侧仍为0，但当您减小当前可查看元素的大小时，新元素将滑入视图）

您必须确保正确地处理“幻灯片”的溢出，以确保内容在消失时不会被压扁和出现错误，但这应该是可行的（如果可以使用mootools，我认为这是可行的）

当然，一旦它是一个零宽度元素，您就应该能够删除它，而不会影响页面外观

编辑以添加宽度转换的工作符号示例：

是一个基于页面的JSFIDLE，您链接了一些不同的操作。代码尽可能与您的代码相似，以确保您可以看到它在做什么

我所做的关键事情是创建一个Welcome0框，它已经离开屏幕的左侧。我将此框的宽度向下滑动到0，这反过来会导致所有其他向左浮动的框随之向上滑动。一旦框的宽度为0，我们可以在下一个过渡中删除它

跳转的原因与你的位置有关。大致与你的位置有关。你相对地定位事物，这意味着它们的位置与预期的标准位置相关。当你移除元素时，你会弄乱这个基本位置，从而以一种Don’我还是有点困惑

使用宽度转换的优点是，它只改变一个元素，而且简单得多。此外，您可能可以在转换完成时将该元素取出（我没有研究如何在转换完成时进行操作），这似乎比在下一次迭代中删除该元素更可取

编辑并解释原稿不起作用的原因

因为我不知道原稿为什么会跳，这让我很烦恼，所以我坐下来研究了所有的事情，既然我已经做了，我想我还是和大家分享一下吧。因为这是最简单的，我加入了ascii艺术图表来展示示例中的各种幻灯片是如何移动的。希望这一切都有意义。：）关键是如何处理

position:relative

的工作原理，因此，如果需要，请首先查找它。：）

在上面的位置B是您的可见视口

当您第一次查看页面时，您的四张幻灯片（1到4张）分别位于位置B、C、D和E

第一次转换时，将前两张幻灯片的左位置设置为-710。这会将它们（而且只有它们）向左移动那么多

您的幻灯片现在处于以下位置：

1 = A
2 = B
3 = D
4 = E

在下一次删除幻灯片时，首先要删除幻灯片1。此时，页面的“自然”布局（即在任何重新定位样式之前）是将幻灯片2到4放在位置B到D。然而，幻灯片2上的定位使其-710px相对移动到位置A，而3和4保持在位置C和D。然后将过渡效果应用到幻灯片2和3。它对幻灯片2（因为它已经有了这种样式）和幻灯片3按预期的方式滑入视图没有影响。它是

1 = A
2 = B
3 = D
4 = E

Start:
  ----------------------------------------------
  |        | Slide1 | Slide2 | Slide3 | Slide4 |
  ----------------------------------------------

Click 1 - After transition
  ----------------------------------------------
  | slide1 | Slide2 |        | Slide3 | Slide4 |
  ----------------------------------------------


Click 2 - After delete
  ----------------------------------------------
  | slide2 |        | Slide3 | Slide4 |        |
  ----------------------------------------------

Click 2 - After transition
  ----------------------------------------------
  | slide2 | Slide3 |        | Slide4 |        |
  ----------------------------------------------


Click 3 - After Delete
  ----------------------------------------------
  | slide3 |        | Slide4 |        |        |
  ----------------------------------------------

Click 3 - After transition
  ----------------------------------------------
  | slide3 | Slide4 |        |        |        |
  ----------------------------------------------