【问题标题】: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-1id-2id-3id-4、id-5 .. id-47, id-48 现在可以正常工作了。

    【讨论】:

    • 是的,它成功了。猜猜我在复制行以添加其他元素时没有看到它。一个典型的菜鸟错误;)非常感谢您的快速回答!
    • 好的,现在还有一个小问题。我修好了,放到网上。离线,我在 Chrome 中尝试过,效果很好,但是当我在线访问页面时,动画效果有点搞砸了。图片相互重叠,然后跳到他们的位置。在Firefox中,我没有这个问题。
    猜你喜欢
    • 2020-06-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多