CODEWITHSUNDEEP
javascriptjqueryhtmlanimation
efdutra
efdutra

Reputation: 59

Function not stopping when calling another one

I`m having a troubble with a simple thing.

I have an div, when clicked, an amination start (an infinite loop of images changing, simulating an animated gif).

But, when i click on the other div, the first one need to stop, and start just the other animation, and this goes on to every animation (will be 8 on total).

Here is the code for just one image loop:

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

The same function for the second animation. The verifica var, and the stopTimer function, i tried to make one stop, and just the other plays, but doesn't seems to be working. That's why it's commented on the code.

It will be easier to look the code running, so thats it ---HERE--- The clickable divs are those two Red Squares.

Someone can help me please!?

Thanks!

Upvotes: 0

Views: 86

Answers (1)

Denys Séguret
Denys Séguret

Reputation: 382102

clearTimeout takes as argument the timer id returned by the setInterval function (here it's t1).

Instead of using fadeOut and fadeIn with a duration of 0, you should simply use hide and show.

As an aside, you can simplify this block :

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

in

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

And this is very wrong :

if(verifica1 = 1){

This is not a test : it always change verifica1 and is always true. You probably want ==.

Is there a point in your code where you (voluntarily) set verifica1 ?

Upvotes: 1

Related Questions