Question

我有一个简单的事情。

我有一个div，当点击时，一个胺化开始（一个无限循环的图像改变，模拟一个GIF动画）。

但是，当我点击另一个div时，第一个需要停止，并启动另一个动画，这将继续到每个动画（总共8个）。

以下是一个图像循环的代码：

var t1;
var t2;
var anim1 = new Array ('img/testes2/anim1_1.png','img/testes2/anim1_2.png');
var anim2 = new Array ('img/testes2/anim2_1.png','img/testes2/anim2_2.png');

var index = 1;

var verifica1 = 0;
var verifica2 = 0;


function rotateImage1(){
$('#imagemPrinc').fadeOut(0, function(){
    $(this).attr('src', anim1[index]);
    $(this).fadeIn(0, function(){
        if (index == anim1.length-1){
            index = 0;
        }
        else{
            index++;
        }
    });
});
return false;
}

function stopTimer1(){
if(verifica1 = 1){
    clearInterval(t2);
}
}

function muda1(){
if (verifica1 = 1){
    //stopTimer2();
    //$('#bgImagem').css({'background-image':'url(img/testes2/anim1_1.png)'});
    t1 = setInterval(rotateImage1,500);
}
}

第二个动画的功能相同。 verifica var和stopTimer函数，我试图一次停止，只是其他播放，但似乎没有工作。这就是它对代码发表评论的原因。

查看代码运行会更容易，因此---HERE--- 可点击的div是那两个红场。

有人可以帮助我！？

谢谢！

Answer 1

clearTimeout将setInterval函数返回的计时器id作为参数（这里是t1）。

不要使用持续时间为0的fadeOut和fadeIn，而应使用hide和show。

顺便说一下，你可以简化这个块：

   if (index == anim1.length-1){
        index = 0;
    }
    else{
        index++;
    }

在

  index = [(index+1)%anim1.length];

这是非常错误的：

if(verifica1 = 1){

这不是一个测试：它总是改变verifica1并且总是如此。你可能想要==。

您的代码中是否有一点（自愿）设置verifica1？

调用另一个时功能不会停止

1 个答案: