我是非常 JavaScript的新手，所以如果这是一个愚蠢的问题，请道歉。
我想制作一个滚动的自动收报机元素。我查找Mootools并使用它的FX.Transitions我可以让Div元素很好地滑动。
它的工作原理是在屏幕中央放置一个710px宽的div，我将其称为Viewport。在这个div内部是另一个，更宽，子div都浮动到左边。当用户单击下一个按钮时，我将css left属性设置为-710px以查找当前查看的项目和下一个项目，使用mootools可以很好地将它们滑过。所以：
用户看到旧元素滑出，新元素滑入。这一切都很有效。
然而，在下一次点击时，我想删除用户已经看过的旧幻灯片（但目前看不见）。我查找了如何在JavaScript中执行此操作，并且它工作正常。但是当我删除它时，当前的中心元素会向左移动（而不是滑动），因为它将left: -710px带到中心，并且float: left！
我可以通过在删除后设置left: 0px来解决这个问题，将其放回到它所属的中心，但是我担心在慢速浏览器上，用户会看到元素捕捉的闪烁左边，然后在我纠正的时候重新出现。
我希望这是有道理的 - 如果没有，我可以在某处上传代码。
有没有办法可以删除旧的最左边的元素并防止其他元素移动？比如，例如，我可以告诉浏览器“请不要重画一下，请”？或者我问一个愚蠢的问题，删除和更正之间的时间对于用户来说太快而不会注意到闪烁？或者是否有更智能的方法来布局元素？
谢谢！
编辑：这里的例子：jsfiddle.net/Az5Lg
答案 0 :(得分：2)
一般情况下，如果您在元素移除的同时进行位置更改（即两个语句之间没有计算和其他代码），那么我会期望它太快而不能被注意到尽管您总是可以测试到找出。
如果你确实想要避免这种情况，你就不得不做一些渐进式的改变。我不知道mootools在动画方面做了什么（http://mootools.net/docs/core/Fx/Fx.Tween看起来像你想要但我不使用mootools - 我假设你正在使用这个或类似于你的animaton已经虽然）但是如果你可以让它动画被移除的div的宽度为0而不是滑动整个批次（所以左边保持0但是当你减小当前可视元素的大小时一个滑入视图）。
你必须确保正确地完成“幻灯片”的溢出，以确保内容不会被压扁并在消失时出现错误但这应该有效（如果可以使用我想象的mootools）它会是。）
当然，一旦它是零宽度元素，您应该能够删除它，而不会影响页面外观。
编辑以添加宽度过渡的工作对象示例：
http://jsfiddle.net/A7YaW/是基于您与某些不同操作链接的页面的jsfiddle。代码与您的代码尽可能相似，以确保您可以看到它正在做什么。
我所做的关键事情是创建一个已经在屏幕左侧的Welcome0框。我将它的宽度向下滑动到0，这反过来导致所有其他浮动的盒子向上滑动。一旦盒子宽度为0，我们就可以在下一个过渡中无痕地移除它。
跳跃的原因与您的定位有关。与您的定位大致相关。你是相对定位的东西，这意味着他们的位置与预期的标准位置相关。当你移除元素时，你正在弄乱这个基础位置，从而以一种让我感到困惑的方式处理周围的事情。
使用宽度转换的优点是它只更改一个元素并且更简单。你也可以在转换完成的那一刻拿出元素（我没有研究如何在转换完成时做什么），这似乎比在下一次迭代中删除它更好。
编辑并说明原作无效的原因
因为我不知道为什么我原来跳了起来，所以我坐下来解决了所有的事情，因为我做了那件事，我想我也可以分享一下。由于它最简单，我包括ascii艺术图表，以显示示例中的各种幻灯片是如何移动的。希望这一切都有道理。 :)关键是position: relative如何工作，所以如果需要先查看它。 ：）
-----------------------------------------
| Pos A | Pos B | Pos C | Pos D | Pos E |
-----------------------------------------
-710 0 710 1420
在上面的位置B是你的可见视口。
当您第一次查看页面时，您的四张幻灯片（1到4）分别位于B，C，D和E位置。
首次转换时，将前两张幻灯片的左侧位置设置为-710。这会将它们（并且只有它们）移动到那么多的左边。
您的幻灯片现在位于：
1 = A
2 = B
3 = D
4 = E
在下一次运行时，当你删除你要做的第一件事是删除幻灯片1.此时页面的“自然”布局（即在任何重新定位样式之前）是在位置B到的幻灯片2到4 D.然而，幻灯片2在其上定位使其-710px相对移动到位置A，而3和4保持在位置C和D.然后将过渡效果应用于幻灯片2和3.它对幻灯片2（因为它已经具有该样式）并按预期将3幻灯片滑入视图。然后它重复......
如此图解
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 | | | |
----------------------------------------------