Mouseover and Mouseout with animate.css in use (wobble)

Question

Mouseover and Mouseout with animate.css in use (wobble)

Navigation

#1 by (1 votes)

1

I can not make Animate.css wobble work as soon as my webpage loads, as I'm trying to make a mouseover / mouseout effect and it's not working. The object starts with the wobble fired, while doing the mouseover, this stops the wobble animate. When I mouseout, the same class (wobble) should restart, but I can not do it. Where am I going wrong?

<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

asked by anonymous 21.05.2018 / 17:05

1 answer

Button making submit to action instead of opening only Modal ___ ___ erkimt Materialize Javascript autocomplete ______ qstntxt ___

I'm using the materialize framework. According to the documentation, I can use "autocomplete" in the form tag according to the Materialize Form link. My question, is this I want to create a javascript for autocomplete of extensions, example: @ gmail.com, @ outlook.com, @ hotmail.com. When the user says "@" this list appears. Below my code

%pre%

Javascript:

%pre%

______ azszpr300761 ___

As I researched, autocomplete does not yet have a feature to show suggestions only after a certain user input. I saw that it's on the list of plugin upgrades.

If I understand what you need, follow an alternative ...

Note: The plugin's default operation has been modified.

%pre% %pre% %pre%

___

score 1 · Accepted Answer

Dude had some strange things in your Script, first that you are using the element $("menu") as a reference, since it does not exist in that HTML that you have posted, after you have not declared if it is a class, using the ". " or if it is an ID using the "#", then being class would look like this: $(".menu")

If I understand you want to do the wobble when putting and removing the mouse from the correct element? If so, the example below should solve. NOTE: I put a small CSS just to make it look better on the Stackoverflow Snippet

Tip: If you want to be swaying infinitamente and only when the mouse is on top just put the infinite class in the tag, like this: <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><divclass="menu animated wobble">
    <img src="http://placecage.com/100/100">
</div>