Question

我正在处理吊扇动画，我在风扇关闭时使用png图像，在时使用gif图像

我的图片已成功切换，并显示gif表示我的粉丝。但是在2分钟后，我的gif文件停止在所有浏览器中运行。

我该如何解决？

这是我的代码：

$(function() {
	var hit2 = 0;
	$('#tfanonoff').click(function() {
    	if  (hit2 % 2 !== 0) {
            $("#foff").fadeIn().animate({'display':'inline-block'},1000);
    		$("#fon").fadeOut(1000);
    	} else { 
    		$("#foff").fadeOut().animate({'display':'none'},1000);
    		$("#fon").fadeIn().animate({'display':'inline-block'},1000);
        }
        hit2++;
        return false;
	});
});

.ceiling-fan {
    max-width: 20%; 
    display: inline-block; 
    text-align: center; 
    left: 41%;  
    position: absolute; 
    transform: rotateX(-58deg);
}

<img id="foff" class="img-responsive ceiling-fan" src="img/fanoff.png" alt="static-img" />
<img id="fon" class="img-responsive ceiling-fan" loop=infinite src="http://animationsa2z.com/attachments/Image/fans/ventilator4.gif" 
    style="display:none;" />

Answer 1

问题是在循环停止之前，gif已被设置为有限数量的交互。您需要重新创建gif，以便有无限次的迭代。

Answer 2

我已在您的gif图片中添加了循环，请从以下网址下载

https://i.imgsafe.org/8b8138e463.gif

我的动画gif在所有浏览器中停留2分钟后停止工作

2 个答案: