0

単純なことで悩んでいます。

クリックすると、アニメーションが開始されるdivがあります（画像が変化し、アニメーションgifをシミュレートする無限ループ）。

しかし、他の div をクリックすると、最初の div を停止して他のアニメーションだけを開始する必要があり、これがすべてのアニメーションに続きます (合計で 8 になります)。

以下は、1 つの画像ループのコードです。

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);
}
}

2 番目のアニメーションの同じ関数。verifica var、および stopTimer 関数、私は 1 つの停止を作成しようとしましたが、他の再生だけが機能していないようです。そのため、コードにコメントが付けられています。

実行中のコードを簡単に確認できるので、それを--- ここに--- クリック可能な div は、それらの 2 つの赤い四角です。

誰か助けてください!?

ありがとう！

4

1 に答える 1

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 を変更し、常に true です。おそらく==が必要です。

(自発的に) verifica1 を設定するコードのポイントはありますか?

于 2012-05-03T17:22:57.797 に答える