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

【问题标题】：How can i play animation one time only?我怎样才能只播放一次动画？
【发布时间】：2017-08-30 19:11:12
【问题描述】：

当 div 容器出现在视口中时，我将 jpg 文件替换为动画 gif 文件。有用。重要提示：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");
		}
		
	});
});

【问题讨论】：

设置一个全局布尔值并根据您是否播放过视频将其设置为 true 或 false，然后将其添加到您的检查中
或者，如果它实际上只是一个正在改变的元素，您可以在文档上取消绑定滚动事件处理程序，一旦它被使用一次？
或类似于 Pete 的评论，但您可以使用 jquery 的数据功能将数据分配给元素本身，然后检查每个元素。这样就可以独立分配许多元素。
在你的动画之后尝试使用 jquery 的 stop() 函数，像这样 .stop(true, true)。
@Shao Khan，这里没有 jquery 动画。

标签： jquery viewport attr animated-gif

【解决方案1】：

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

var played = false;

然后检查您的动画是否已经播放，并且不要忘记在 if 中将其设置为 true：

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

【讨论】：

非常感谢 DocWeird：它适用于 var play = true
哈哈，是的，你是对的——我的错误。我有点着急。答案已更正。