Question

我购买了一个html模板，我遇到了一个实施的流沙插件的问题。

问题是，一旦我使用流沙改变内容，它最终会出现问题。这些图片漂浮到其他地方，但最后它们以极其苛刻和突然的方式变成了正确的输出图片。

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

有人知道可能导致此问题的原因吗？提前谢谢！

干杯，马克

Answer 1

请注意这一点。在list元素中，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应该是唯一的。这是我注意到的第一个问题。

编辑：

确认。这就是问题所在。我提供了数据ID id-1 ， id-2 ， id-3 ， id-4 ，< strong> id-5 .. id-47 ， id-48 ，现在工作正常。

流沙，在动画结束时突然更换

1 个答案: