ZoomIn animation gets flashing with mouseenter

I'm using animate.css to zoom in on an image. The idea is that the animation only works with hover / mouseenter, that is, when the user hovers over it. When I use any animation other than zoomIn, it works normally; however, with the code below, although zoom works, the image is flashing when I hover the mouse in certain places. If I take it off .mouseout, the event only occurs once. What to do to solve?

<img src="imagens/icone.png" class="hover" />

    <script>
        $(document).ready(function() {
            $('.hover').mouseenter(function() {
                var mv = $(this);
                mv.addClass('animated zoomIn');
            });
            $('.hover').mouseout(function(){
              var mv = $(this);
              mv.removeClass('animated zoomIn');
            });
        });
    </script>
Author: Rafaela Lopes, 2018-07-14
Source

2 answers

As I had commented, this error was happening by the following:

When the Class zoomIn is added, It changes the properties of the element as scale, which goes from 0 to 1. This is what makes the animation occur.

Only because you are hearing 2 events, one of mouseenter and one of mouseleave, the handler of mouseenter is executed the moment the user hovers the mouse. But since the scale is lowered to 0, the image automatically exits from under the mouse and fires the handler of mouseleave. This handler in turn takes away the Class zoomIn.

These events keep repeating themselves endlessly that's why you see the image flashing.

A solution is as follows: 

$('.hover').mouseenter(function() {
    var mv = $(this);
    mv.addClass('animated zoomIn').one("mozAnimationEnd webkitAnimationEnd oanimationend animationend", function(){
      mv.removeClass('animated zoomIn');
    });
});

In the documentation it is explained that the one() method of JQuery is very useful when you want to at least run a handler once for a function and it is what you need. You need zoomIn to run at least once before you can remove it.

Can see the operation here .

I hope this solves, your problem.

Hugs.

 1
Author: Andrew Ribeiro, 2018-07-14 18:51:09

Andrew's answer is perfect, it really solves the problem, I leave an alternative here if you choose not to use an entire library with effects that can be easily realized (even with more visual implementations) only with CSS. 

img:hover {
  cursor: pointer;
  animation-name: imgAnime;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-play-state: running;
}

@keyframes imgAnime {
  0% { 
    width: 200px;
    height: 200px;
    opacity: 0.2;
  }
  25% {
    width: 80px;
    height: 80px;
    opacity: 0.4;
  }
  50% {
    width: 120px;
    height: 120px;
    opacity: 0.6;
	}
  75% {
    width: 160px;
    height: 160px;
    opacity: 0.8;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 1.0;
  }
}
<img src="https://images.pexels.com/photos/1028674/pexels-photo-1028674.jpeg?cs=srgb&dl=apple-black-braided-1028674.jpg&fm=jpg" class="hover" width="200" height="200"/>
 0
Author: LeAndrade, 2018-07-14 21:02:43