Mouseover and Mouseout with Animate.css in use (Wobble)

Asked

Viewed 225 times

1

I cannot make the Wobble of Animate.css work as soon as my web page loads as I am trying to make mouseover effect / mouseout and it is not working. The object starts with the triggered Wobble, when making the mouseover, this stops making the Wobble Animate. When making mouseout, the same class (Wobble) should work again, but I can’t make it run. Where I’m missing ?

<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>
javascript css animate.css

1 answer

1


Dude had some weird stuff in his script, first you’re using as reference the element $("menu") since it does not exist in this HTML that you posted, after you did not declare if it is a class, using the "." or if it is an ID using "#", then being a class would look like this for example: $(".menu")

If I understood you want to do Wobble when placing and removing the mouse from the correct element? If that’s the case below should solve. NOTE: I put a small CSS just to make the view better in the Stackoverflow Snippet

Tip: If you want me to rock infinitamente and only for when the mouse is on top just put the class infinite on the tag, that way: <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>

  • I ate ball even in class ... I did not refer the menu in the div and so it got weird ... The idea was exactly what you did even, let the Wobble active and when passing the mouse, it stop with the movement ... and when removing the mouse, back the movement, perfect ! The hint of the Finite within the class found the maximum ! Lesson learned! Now I’m seeing how to do this with the checked button, because it’s the real condition I have here, because I have a button that triggers the menu and it has the position checked, as for example, . menu:checked { css code; } , but it has helped a lot already!

  • @Eitaehnoiz understood your intention. Well, try to put this code there in the real situation and look at the fine adjustments you will need to make. If you need more strength tell me. Just remember that the :checked needs to be clicked, it may even have a mouseover, but to catch the style of the state :checked you will need to click it any way...

  • I’ll think of a way here with this :checked, maybe a script inside it, with the Wobble paused, and when leaving, this Wobble goes back to normal state. Maybe like this. 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'); }); });

  • @Eitaehnoiz I understand very little about jQuery, but if you have a more complicated question opens a new question that has people here who can answer you nicely. About :checked for it to work you will need an input:checkbox, or else use the jQuery itself to get an "active" class in that div when you click it. Good luck there, we’re together!

Browser other questions tagged javascript css animate.css

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