1

Não consigo fazer o wobble do Animate.css funcionar logo que a minha pagina web carrega, pois estou tentando fazer efeito de mouseover / mouseout e nao esta funcionando. O objeto começa com o wobble acionado, ao fazer o mouseover, este para de fazer o animate wobble. Quando fizer mouseout, a mesma classe (wobble) deverá voltar a funcionar, porém náo consigo fazer rodar. Onde estou errando ?

<div class="cabeceira">
   <img src="logo.jpg">
</div> 
<script type="text/javascript">
      $(document).ready(function(){
         $("menu").on('mouseover', function(){
         $(this).removeClass('animated wobble');
      });

      $("menu").on('mouseout', function(){
         $(this).addClass('animated wobble');
      });
    });
</script>

1 Resposta 1

1

Cara tinha algumas coisas estranhas no seu Script, primeiro que vc está usando como referencia o elemento $("menu") sendo que ele não existe nesse HTML que vc postou, depois que vc não declarou se ele é uma classe, usando o "." ou se é um ID usando o "#", então sendo classe ficaria assim por exemplo: $(".menu")

Se eu entendi vc quer fazer o wobble ao colocar e retirar o mouse do elemento correto? Se for isso o exemplo abaixo deve resolver. OBS: Coloquei um pequeno CSS apenas para ficar melhor a exibição no Snippet do Stackoverflow

Dica: Se vc quiser que fique balançando infinitamente e só para quando o mouse estiver em cima basta colocar a classe infinite na tag, dessa forma: <div class="menu animated wobble infinite">

$(document).ready(function(){
     $(".menu").on('mouseover', function(){
     $(this).removeClass('animated wobble');
  });

  $(".menu").on('mouseout', function(){
     $(this).addClass('animated wobble');
  });
});
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
div {
    display: inline-block;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="menu animated wobble">
    <img src="http://placecage.com/100/100">
</div> 

4
  • comi bola mesmo na classe ... nao referenciei o menu na div e por isso ficou estranho ... A ideia era exatamente a que vc fez mesmo, deixar o wobble ativo e ao passar o mouse, ele parar com o movimento ... e ao retirar o mouse, voltar o movimento, perfeito ! A dica do infinite dentro da classe achei o máximo ! Liçao aprendida! Agora estou vendo como fazer isso com o botao em checked, pois é a condição real ao qual tenho aqui, pois tenho um botao que aciona o menu e ele tem a posição checked, como por exemplo, .menu:checked { codigo css; } mas já ajudou muito!
    – user33011
    Commented 21/05/2018 às 17:38
  • @EitaEhNOiz entendi a sua intenção. Bom, tenta colocar esse código ai na situação real e olha os ajustes finos que vc vai precisar fazer. Se vc precisar de mais uma força me fala. Só lembre que o :checked precisa ser clicado, ele até pode ter um mouseOver, mas para pegar o estilo do estado :checked vc vai precisar clicar nele de qq forma...
    – hugocsl
    Commented 21/05/2018 às 17:44
  • vou pensar em uma forma aqui com este :checked, talvez um script dentro dele, com o wobble pausado, e ao sair, este wobble volte ao estado normal. Talvez assim, .menu-open:checked { -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); } $(document).ready(function(){ $(".menu-open").on('mouseover', function(){ $(this).removeClass('animated wobble'); }); $(".menu-open").on('mouseout', function(){ $(this).addClass('animated wobble'); }); });
    – user33011
    Commented 21/05/2018 às 17:54
  • @EitaEhNOiz eu entendo muito pouco de jQuery, mas se vc tiver uma dúvida mais complicada abre uma nova pergunta que tem gente aqui que consegue te responder de boa. Sobre o :checked para ele funcionar vc vai precisar de um input:checkbox, ou então usar o prórpio jQuery para comocar uma classe "active" nessa div quando vc clicar nela. Boa sorte ai, tamo junto!
    – hugocsl
    Commented 21/05/2018 às 17:59

Você deve fazer log-in para responder a esta pergunta.