Как проигрывать анимацию, только когда курсор находится на блоке?

Question

Реализовал функцию, которая, при наведении мыши на блок, затемняет его слева направо, а в центре отображается картинка, проблема в том, что если быстро наводить курсор на блок, то анимация либо багует, либо отображается один раз.

Можно ли сделать так, что бы анимация проигрывалась только в момент, когда курсор находится на блоке?

Т.е если, например, мы убираем мышь до того, как полностью выполнится mouseenter, то выполняется анимация для mouseleave.

$(function() {
  $('.about_blocks__block1').mouseenter(function() {
    if (!$(".about_blocks__block1").children('.about_blocks__block__blackout1').length > 0 && !$('.about_blocks__block__blackout1').children('.about_blocks__block__img1').length > 0) {
      $(this).append('<div class="about_blocks__block__blackout1"></div>');
      $('.about_blocks__block__blackout1').animate({
        width: 240
      }, 500);
      $('.about_blocks__block__blackout1').append('<div class="about_blocks__block__img1"></div>');
      $('.about_blocks__block__img1').show(1000);
    }
  });
  $('.about_blocks__block1').mouseleave(function() {
    if ($(".about_blocks__block1").children('.about_blocks__block__blackout1').length > 0 && $('.about_blocks__block__blackout1').children('.about_blocks__block__img1').length > 0) {
      $('.about_blocks__block__img1').animate({
        opacity: 0
      }, 300);
      $('.about_blocks__block__blackout1').animate({
        width: 0
      }, 1000);
      setTimeout(function() {
        $('div.about_blocks__block__img1, div.about_blocks__block__blackout1').remove();

      }, 1002);
    }
  });
  $('.about_blocks__block2').mouseenter(function() {
    if (!$(".about_blocks__block2").children('.about_blocks__block__blackout2').length > 0 && !$('.about_blocks__block__blackout2').children('.about_blocks__block__img2').length > 0) {
      $(this).append('<div class="about_blocks__block__blackout2"></div>');
      $('.about_blocks__block__blackout2').animate({
        width: 240
      }, 500);
      $('.about_blocks__block__blackout2').append('<div class="about_blocks__block__img2"></div>');
      $('.about_blocks__block__img2').show(1000);
    }
  });

  $('.about_blocks__block2').mouseleave(function() {
    if ($(".about_blocks__block2").children('.about_blocks__block__blackout2').length > 0 && $('.about_blocks__block__blackout2').children('.about_blocks__block__img2').length > 0) {
      $('.about_blocks__block__img2').animate({
        opacity: 0
      }, 300);
      $('.about_blocks__block__blackout2').animate({
        width: 0
      }, 1000);
      setTimeout(function() {
        $('div.about_blocks__block__img2, div.about_blocks__block__blackout2').remove();
      }, 1002);
    }
  });
  $('.about_blocks__block3').mouseenter(function() {
    if (!$(".about_blocks__block3").children('.about_blocks__block__blackout3').length > 0 && !$('.about_blocks__block__blackout3').children('.about_blocks__block__img3').length > 0) {
      $(this).append('<div class="about_blocks__block__blackout3"></div>');
      $('.about_blocks__block__blackout3').animate({
        width: 240
      }, 500);
      $('.about_blocks__block__blackout3').append('<div class="about_blocks__block__img3"></div>');
      $('.about_blocks__block__img3').show(1000);
    }
  });
  $('.about_blocks__block3').mouseleave(function() {
    if ($(".about_blocks__block3").children('.about_blocks__block__blackout3').length > 0 && $('.about_blocks__block__blackout3').children('.about_blocks__block__img3').length > 0) {
      $('.about_blocks__block__img3').animate({
        opacity: 0
      }, 300);
      $('.about_blocks__block__blackout3').animate({
        width: 0
      }, 1000);
      setTimeout(function() {
        $('div.about_blocks__block__img3, div.about_blocks__block__blackout3').remove();
      }, 1002);
    }
  });
});

.about_blocks {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  margin: 130px 0 165px 480px;
}

.about_blocks__block1,
.about_blocks__block2 {
  margin-right: 120px;
}

.about_blocks__block1,
.about_blocks__block3,
.about_blocks__block2 {
  width: 240px;
  height: 240px;
  border-radius: 5px;
}

.about_blocks__block1 {
  background: red;
}

.about_blocks__block2 {
  background: red;
}

.about_blocks__block3 {
  background: red;
}

.about_blocks__block1,
.about_blocks__block3,
.about_blocks__block2:hover {
  cursor: pointer;
}

.about_blocks__block__img1,
.about_blocks__block__img2,
.about_blocks__block__img3 {
  background: white;
  background-repeat: no-repeat;
  width: 77px;
  height: 50px;
  margin-left: 80px;
  margin-top: 95px;
}

.about_blocks__block__blackout1,
.about_blocks__block__blackout2,
.about_blocks__block__blackout3 {
  background: rgba(0, 0, 0, 0.5);
  height: 240px;
  border-radius: 5px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="about_blocks">
  <div class="about_blocks__block1"></div>
  <div class="about_blocks__block2"></div>
  <div class="about_blocks__block3"></div>
</div>

БЛОГ НА HUSL

Как проигрывать анимацию, только когда курсор находится на блоке?

Ответы (0 шт):