0

我在一件简单的事情上遇到了麻烦。

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

但是，当我点击另一个 div 时，第一个 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 函数，我试图停下来，而其他播放，但似乎没有工作。这就是为什么它对代码进行了注释。

查看运行的代码会更容易，所以就这样---这里--- 可点击的 div 是那两个红色方块。

有人可以帮助我吗！？

谢谢！

4

1 回答 1

1

clearTimeout 将 setInterval 函数（此处为 t1）返回的计时器 ID 作为参数。

而不是使用持续时间为 0 的淡出和淡入，您应该简单地使用隐藏和显示。

顺便说一句，您可以简化此块：

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

在

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

这是非常错误的：

if(verifica1 = 1){

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

您的代码中是否存在您（自愿）设置 verifica1 的地方？

于 2012-05-03T17:22:57.797 回答