我怎么只能播放一次动画

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");
		}
		
	});
});

Answer 1

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

var played = false;

然后检查您的动画是否已经播放，并且不要忘记通过以下方式在 if 中实际将其设置为 true：

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