流沙，动画结束时突然替换答案

【问题标题】：Quicksand, sudden replacement at end of animation流沙，动画结束时突然替换
【发布时间】：2011-12-26 11:27:19
【问题描述】：

我购买了一个 html 模板，但我在使用流沙插件时遇到了问题。

问题是，一旦我使用流沙更改内容，最后就会出现问题。图片浮动到其他地方，但最后它们以非常刺耳和突然的方式更改为正确的输出图片。

我只更改了 html 代码，因此 .js 文件中没有任何内容。在这里你可以看到问题：http://marcknoll.com/work.html 点击过滤器，你就会明白我的意思了。

有人知道是什么原因导致了这个问题吗？提前致谢！

干杯，马克

【问题讨论】：

标签： javascript jquery animation quicksand

【解决方案1】：

请注意这一点。在列表元素中，li 元素的 data-id 在第 14 li 之后重复。从 id-1 重新开始。

 <li data-id="id-1" class="photo">
    <a href="http://marcknoll.com/images/preview/canals.jpg" rel="image_group">
      <img src="work_files/work_1.jpg" alt="Work Image">
    </a>
 </li>
 <li data-id="id-2" class="photo">
    <a href="http://marcknoll.com/images/preview/bikes.jpg" rel="image_group">
       <img src="work_files/work_2.jpg" alt="Work Image">
    </a>
 </li>
 <li data-id="id-3" class="photo">
    <a href="http://marcknoll.com/images/preview/fountain.jpg" rel="image_group">
       <img src="work_files/work_3.jpg" alt="Work Image">
    </a>
 </li>
 ..........
 ..........
 ..........
 ..........
 ..........
 <li data-id="id-14" class="photo">
  <a href="http://marcknoll.com/images/preview/water1.jpg" rel="image_group">
    <img src="work_files/work_12.jpg" alt="Work Image">
  </a>
</li>
<li data-id="id-1" class="photo">   // data-id repeating
  <a href="http://marcknoll.com/images/preview/sony.jpg" rel="image_group">
    <img src="work_files/work_13.jpg" alt="Work Image">
  </a>
</li>

为了使插件流沙正常工作，每个 li 的 data-id 应该是唯一的。这是我注意到的第一个问题。

编辑：

已确认。这就是问题所在。我给了 data-ids id-1、id-2、id-3、id-4、id-5 .. id-47, id-48 现在可以正常工作了。

【讨论】：

是的，它成功了。猜猜我在复制行以添加其他元素时没有看到它。一个典型的菜鸟错误；）非常感谢您的快速回答！
好的，现在还有一个小问题。我修好了，放到网上。离线，我在 Chrome 中尝试过，效果很好，但是当我在线访问页面时，动画效果有点搞砸了。图片相互重叠，然后跳到他们的位置。在Firefox中，我没有这个问题。