Question

我的想法是展示一个使用必须点击的冰块的图像，然后才显示冰块破碎。仅仅3秒钟后，冰块将完全破碎并且GIF完成（它不是无限剪辑），然后页面将向下滚动到页面的“关于”。这是我有冰立方图像的div：

<div class="row">
    <div class="col-lg-12 imageWrap page-scroll">
        <a href="#about"><img id="icebreaker" onclick="changeImg();"  src="img/wiggle.gif"></a>
        <p class="callToAction">Break The Ice</p>
    </div>
</div>

下一部分有一个id = #about，它应该滚动到。我正在使用Bootstrap页面滚动插件允许在点击时进行平滑滚动，但我想要的是，在GIF完成播放之前不会发生平滑滚动。以下脚本是用破碎的冰块GIF替换我当前的冰块。

<script>
    function changeImg() {
        $("#icebreaker").attr("src", "img/ice-cube.gif");
    }
</script>

我已经尝试过使用settimeout滚动但是我无法让它工作，我在滚动之前尝试打破页面几秒钟但是它会停止动画，因为它会打破整个页面。如果有人能帮助我找出某种连锁反应，那就太好了！

Answer 1

试试这个

function changeImg() {
  var img = document.getElementById("icebreaker");
  img.onload = function() {
    setTimeout(function() {
      /*your scroll fn here*/
    }, 5000)
  }
  img.src = "img/ice-cube.gif";
}

timeOut fn正在运行你需要有jquery.ui.js才能做到这一点检查这里的工作样本

activate page scroll with timeout

如何在gif动画完成后激活页面滚动

1 个答案: