在向下或向上滚动时从头开始"重新启动"一个 gif,然后回到视野中。
因此,例如,我的页面加载,动画开始 ->我向下或向上滚动 ->我回到带有 gif 的div,gif 已被重置。
我在代码笔中找到了这段很棒的 js,当我滚动到顶部并返回时效果很好,但当我向下滚动并返回时不起作用。
https://codepen.io/anon/pen/aWvagO?editors=0010代码如下所示:
$(window).scroll(function() {
var current = $(this).scrollTop(),
path = '//cdn.pbrd.co/images/5QABxgAp7.gif',
visible = $('img').css('opacity') != 0;
if (current > 200) {
if (!visible) $('img').attr('src', path).fadeTo(400,1);
}
else if (visible) $('img').fadeTo(0,0);
});
有没有一种简单的方法可以使其工作并保持代码简单?
多谢
我可能为时已晚,这可能是一个糟糕的解决方案。但是,我通过两个重复的 gif 并在"重新启动"gif 时在两者之间交替解决了类似的问题。这在需要时无缝地重新启动了 gif,从技术上讲,它是相同的 gif。希望这有帮助,祝你好运!