Animation zoomIn flashes with mouseenter

Question

Animation zoomIn flashes with mouseenter

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

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

<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>

javascript html hover mouseover animate.css

asked by anonymous 14.07.2018 / 19:17

2 answers

0

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 performed (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"/>

14.07.2018 / 22:27

Error EF Update Method with Firebird 2.5 Popular table in page load

score 1 · Accepted Answer

As I commented, this error was happening because of the following:

When the zoomIn class is added, it changes the properties of the element to scale , which goes from 0 to 1 . This is what makes the animation happen.

Just because you're listening to 2 events, one of mouseenter and one of mouseleave , the mouseenter handler runs the moment the user hovers. But as scale is decreased to 0, the image automatically exits under the mouse and fires the mouseleave handler. This handler in turn takes the class zoomIn .

These events keep repeating themselves non-stop, which is why you see the image blinking.

One 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 documentation it is explained that the one() method of JQuery is very useful when you want to at least execute a time a handler for a function and that's what you need. You need to zoomIn run at least once before you can remove it.

You can see how it works here .

I hope this solves, your problem.

Hugs.