1

Criei uma função a qual quando o mouse passasse por cima da DIV, ela faria uma animação inserindo e removendo classes. Mas o que eu não entendo é que a animação que está dentro da queue, só funciona a primeira vez. Quando passo o mouse novamente, ela não funciona. Tentei até o usar o console.log() pra ver o que era, e realmente, depois da segunda vez, ele nem entrava na 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);

        });
2
  • Quando você tira o mouse, ele retorna ao estado original ?
    – Wan
    13/05/2020 às 0:18
  • Sim, quando eu tiro o mouse ele remove a class e volta o original certinho. O problema é quando eu vou tentar passar o mouse novamente, ele só executa uma das animações, mas a que está dentro da Queue não executa mais.Mas o que eu não entendo, é que de primeira vez que eu passo o mouse ela funciona certinho. 13/05/2020 às 2:21

1 Resposta 1

1

Uma solução funcional pra isso, seria você adicionar a própria div, eventos do mouse para disparar sua função.

   <!-- DIV a ser animada -->

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

Outra forma seria você transformar seu código em duas partes diferentes apenas com mouseover e 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
}

Veja o exemplo -> aqui <-

6
  • Tentei fazer mas ta com o mesmo problema. Porque a parte de chamada do evento ta funcionando certinho, o que está dando errado é na minha primeira função de Hover. Que eu quero que ele execute uma instrução JQuery e logo em seguida outra com Delay, por isso utilizei o Delay e a Queue. Mas o problema, é que quando é passado o mouse pela primeira vez funcionam as duas instruções certinho. Mas, quando o mouse é tirado e é passado pela segunda vez, ele simplesmente executa a primeira instrução, mas a segunda que está dentro da Queue após Delay não. 13/05/2020 às 3:10
  • Eu mudei o exemplo, dá uma olhada novamente. Pelo que eu entendi, ele não está passando no queue na segunda vez. Tenta mudar a abordagem deste delay. Olha o exemplo que eu fiz.
    – Wan
    13/05/2020 às 5:28
  • Seu console não indica nenhum erro?
    – Wan
    13/05/2020 às 5:42
  • nenhum, creio que seja erro semântico. Mas já resolvi já, troquei o delay do jquery pelo setTimeout do Javascript, e funcionou muito bem. 13/05/2020 às 6:32
  • Show! Boa sorte em seus projetos! ;)
    – Wan
    13/05/2020 às 6:41

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .