Javascript:动画marginLeft时奇怪的错误?

时间:2011-10-07 12:02:02

标签: javascript html css slide

所以我在javascript中制作了一种网格布局,但它还没有像现在这样工作。我已经设置它以便改变元素的左边距以使其向左/右“滑动”。但是,出于某种原因,它拒绝滑到最后一张幻灯片。不知道为什么,似乎无法找到这个bug!

以下是整页的副本:

http://jsbin.com/obivap/3/edit#preview

单击其他“页面”之一以滑动到下一张幻灯片。

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

你正在使用边距和花车进行动画制作。因此,一旦你将最左边的盒子从容器中推出一个边缘,它右边的盒子(由于浮子,直到现在已经随之移动)将停止移动。在-600px,盒子完全离开容器,因此接下来的盒子现在正对着容器的边框。你没有动画他们的边缘,所以他们不会离开他们的容器。

如果你试图通过设置边距动画来解决这个问题,那就会变得混乱。我没有仔细检查您的代码,但如果这些框已经position:relative,那么您也可以设置其left金额的全部。这意味着代码中有两个简单的更改:删除每个:first选择器(因为您要为它们设置动画),并将所有marginLeft更改为left

http://jsbin.com/obivap/6/edit