我怎样才能一次播放动画？

Question

当div容器出现在视口中时，我用动画gif文件替换jpg文件。有用。重要提示：gif文件没有循环。 我的问题：当你再次滚动，甚至一点点，向上或向下滚动时，替换再次播放。 有没有一个简单的解决方案可以在第一次更换后停止此事件？ 感谢

jQuery(document).ready(function($){
	
	var $window = $(window);
	var $elem = $(".animated")

		function isScrolledIntoView($elem, $window) {
			var docViewTop = $window.scrollTop();
			var docViewBottom = docViewTop + $window.height();

			var elemTop = $elem.offset().top;
			var elemBottom = elemTop + $elem.height();

			return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
		}


	$(document).on("scroll", function () {
		if (isScrolledIntoView($elem, $window)) {
			$("#graph1").attr("src","images/graphsSECHE_500x500_noloop2.gif");
		}
		
	});
});

1 个答案:

答案 0 :(得分：0)

在页面加载时初始化一个布尔值，例如：

var played = false;

然后检查你的动画是否已经播放过，并且不要忘记在if by中实际设置为true：

if (isScrolledIntoView($elem, $window) && played === false) {
    $("#graph1").attr("src","images/graphsSECHE_500x500_noloop2.gif");
    played = true;
}

Answer 1

在页面加载时初始化一个布尔值，例如：

var played = false;

然后检查你的动画是否已经播放过，并且不要忘记在if by中实际设置为true：

if (isScrolledIntoView($elem, $window) && played === false) {
    $("#graph1").attr("src","images/graphsSECHE_500x500_noloop2.gif");
    played = true;
}