Почему анимация не повторяется при наведении мыши и наведении курсора

Question

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

Я уже пытался удалить классы анимации, но он все еще не работает

HTML

<div class="hover-box">
</div>

<div class="row">

<a href="#"><img src="Resources/Images/pic.jpg" class=" img1" /></a>

</div>

CSS

.hover-box{

    position: absolute;
    background-color: #000;
    width: 90%;
    height: 90%;
    border: 1px solid #000;
    z-index: 1;
    display: none;

} 

.hover-box.animated{

    display: block;

}

JQuery

var box =$('.hover-box').clone(true);

$('.img1').hover(function(){

    $('.hover-box').addClass('animated fadeIn ');

});



 $('.hover-box').mouseout(function(){
    $('.hover-box').addClass('animated fadeOut');
     var el = $(this);
     el.before(box);
     el.replaceWith(box);

});

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

Answer 1

hover() не является синонимом mouseenter(). Это сокращение для .mouseenter(handlerIn).mouseout(handlerOut) в форме: .hover(handlerIn, handlerOut).

Если handlerOut не указано, предполагается, что вы хотите, чтобы указанный обработчик запускался как во входном, так и в выходном состоянии.

Поэтому код, который вы представили, делает следующее:

обработчик в :

• добавить классы animated fadeIn

handlerOut :

• добавить классы animated fadeIn
• с последующим запуском кода, указанного в вашей второй привязке, на mouseout.

Вы, вероятно, хотите что-то вроде этого:

$('.hover-box').hover(
   function() {
     $(this).addClass('hovered');
   },
   function() {
     $(this).removeClass('hovered')
   }
);

С одним только вышеупомянутым вы можете использовать CSS, чтобы настроить, как элемент анимирует вход и выход.

---

Или, чтобы положиться на анимации jQuery:

$('.hover-box').hover(
  function() {
    $('img', this).fadeIn()
  },
  function() {
    $('img', this).fadeOut()
  }
)

Рабочий пример:

$('.hover-box').hover(
  function() {
    $('img', this).fadeIn()
  },
  function() {
    $('img', this).fadeOut()
  }
)

.hover-box img {
  display: none;
}
.hover-box {
  display: inline-block;
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="hover-box">
  <img src="https://via.placeholder.com/150">
</div>

Answer 2

Если это то, что вы пытаетесь сделать, вам не нужны клоны. JQuery имеет функции анимации fadeIn() и fadeOut()

Редактировать

Устранена проблема с отсутствующей функцией handlerOut для .hover(), как упоминалось.

$('.img1').hover(function() {
  $('.hover-box').fadeIn("slow");
},() => undefined);

$('.hover-box').mouseout(function() {
  $('.hover-box').fadeOut("slow");
});

.hover-box {
  position: absolute;
  background-color: #000;
  width: 90%;
  height: 90%;
  border: 1px solid #000;
  z-index: 1;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="hover-box">
</div>

<div class="row">
  <a href="#"><img src="Resources/Images/pic.jpg" class=" img1" /></a>
</div>