Question

我正在处理HTML中的.gif图像，这样如果我按下开关然后加载fan.gif并再次按下开关然后加载fan.png图像。它包含粉丝动画，我使用.gif图像为我的粉丝制作动画。但几秒钟后，我的.gif无法正常工作并停止了动画效果。

我的HTML代码如下：

<img id="foff" class="img-responsive ceiling-fan" src="img/foff.png" style=""/>
<img id="fon" class="img-responsive ceiling-fan" src="img/animatedfan1.gif" style="opacity:0;"/>

我的jquery代码如下：

$(function(){
var hit2 =0;
$('#tfanonoff').click(function(){
if  (hit2 % 2 !== 0)
                { //for hits 2,4,6,8
                $("#foff").animate({'opacity':'1'},1000);
                $("#fon").animate({'opacity':'0'},1000);
                }
                else
                { // for hits 1,3,5,7   
                $("#foff").animate({'opacity':'0'},1000);
                $("#fon").animate({'opacity':'1'},1000);

                }
               hit2++;
    return false;

});
});

我的CSS如下：

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

Answer 1

你应该收到错误（在你的控制台中查看），因为你在jquery中使用的Id是错误的。它不是off和on，而是foff和fon。将 hit1的值初始化为1 ，以便从首次点击本身开始显示效果。试试以下内容：

$(function(){
var hit1 =1;
$('#aconoff').click(function(){
            if  (hit1 % 2 !== 0)
                {
                $("#foff").css({'opacity':'0'},1000);
                $("#fon").css({'opacity':'1'},1000);
                }
                else
                { // for hits 1,3,5,7
                $("#foff").css({'opacity':'1'},1000);
                $("#fon").css({'opacity':'0'},1000);
                }
               hit1++;
    return false;

});

});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="foff" class="img-responsive ceiling-fan"  src="http://www.pngpix.com/wp-content/uploads/2016/04/Indoor-Ceiling-Fan-PNG-image.png" style=""/>
<img id="fon" class="img-responsive ceiling-fan" src="https://media.giphy.com/media/cTx9LHAGm5nd6/giphy.gif" style="opacity:0;"/>

<button id="aconoff">Switch</button>

.gif图像在从.png切换到.gif后有时无法播放

1 个答案: