Jquery - My What doesn’t work more than once in this animation. What can it be?

Asked

Viewed 42 times

0

I created a function that when the mouse went over the DIV, it would make an animation by inserting and removing classes. But what I don’t understand is that the animation that’s inside the Queue, only works the first time. When I mouse again, it doesn’t work. I even tried to use the.log() console to see what it was, and actually, after the second time, it didn’t even enter Queue. 

divTarget2.hover(function(){

       console.log(stats);
       $(this).find('img').addClass('anima-doenca-hover').delay(1000).
           queue(function(){
               console.log('entrou na queue');

               $(this).parent().addClass('anima-caixa-hover');

               console.log(stats);   
            });
            soundEffect.play();

}).mouseleave(function(){

        $(this).find('img').removeClass('anima-doenca-hover');

        $(this).removeClass('anima-caixa-hover');

        soundEffect.pause();
        soundEffect.currentTime = 0;
        console.log(stats);

        });
javascript jquery animation queue delay

  • When you take out the mouse, it returns to the original state ?

  • Yes, when I take the mouse it removes the class and returns the original straight. The problem is when I try to move the mouse again, it only runs one of the animations, but the one inside Queue no longer runs.But what I don’t understand, is that the first time I pass the mouse it works right.

1 answer

0


A workable solution to this, would be you add your own div, mouse events to trigger your function.

   <!-- DIV a ser animada -->

  <div id="idMinhaDiv" onmouseover="chamaEfeitos()" onmouseout="cancelaEfeitos()">
      <!-- conteúdo da DIV -->
  </div>

Another way would be for you to turn your code into two different parts just with mouseover and mouseout

var time; // Variável para armazenar o temporizador (Necessário apenas para interrompe-lo)

$("#idMinhaDiv").on("mouseover",function(){
    $(this).toggleClass("anima-caixa-hover");
    $(this).toggleClass("qualquer-classe");
    this.time = setTimeout(() => {executaComDelay();},2000); // Executa com delay
    // E suas outras instruções e funções.
});

$("#idMinhaDiv").on("mouseout",function(){
    clearTimeout(this.time); // Para ele executar mesmo com o mouse já saído de cima, remova essa linha 
    $(this).removeClass("anima-caixa-hover");
    $(this).removeClass("qualquer-classe");
    // E suas outras instruções e funções.
});

function executaComDelay(){
  // função executada com delay
}

Take the example -> here <-

  • I tried to do it, but you have the same problem. Because the call part of the event is working just fine, what’s going wrong is my first Hover role. That I want him to execute a Jquery statement and then another one with Delay, so I used Delay and Queue. But the problem is that when it is passed the mouse for the first time work the two instructions just right. But when the mouse is taken out and is passed the second time, it simply executes the first instruction, but the second that is inside the Queue after Delay does not.

  • I changed the example, take a look again. From what I understand, it is not passing in Queue the second time. Try to change the approach of this delay. Look at the example I made.

  • Your console indicates no errors?

  • none, I believe it is semantic error. But I already solved, I changed the jquery delay by Javascript setTimeout, and it worked very well.

  • Show! Good luck in your projects! ;)

  • I wish you the same!

Show 1 more comment

Browser other questions tagged javascript jquery animation queue delay

You are not signed in. Login or sign up in order to post.