javascript - 流沙，动画结束时突然替换

Question

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

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

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

有谁知道什么可能导致这个问题？提前致谢！

干杯，马克

Answer 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，现在它工作正常。