jquery - 为什么动画不会在鼠标移出和鼠标悬停时重复

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，则假定您希望提供的处理程序在进入和退出状态更改时运行。

因此，您提供的代码执行以下操作:

处理程序输入:

• 添加类动画淡入

handlerOut:

• 添加类动画淡入
• 然后在 mouseout 上运行第二个绑定(bind)中指定的代码。

你可能想要这样的东西:

$('.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>