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

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

handlerIn ：

添加类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()

修改

如上所述，解决了.hover()缺少handlerOutOut函数的问题。

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

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

2 个答案: