jquery - mouseover mouseleave translateY不重复

Question

我正在尝试在 jquery 中使用一个函数，我使用 mouseover 从顶部出现一个 div，然后使用 mouseleave 使其消失。我可以执行此操作一次，但如果我再次执行鼠标悬停，则不再有效。

html

<div id="box">
<div id="box_appear"></div>
</div>

CSS

#box{position:relative; width:300px; height:300px; overflow:hidden}
#box_appear{position:absolute; width:300px; height:300px; transform:translateY(-100%); top:0;left:0}

@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}

to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
  }
 }

.slideInDown {
 -webkit-animation-name: slideInDown;
 animation-name: slideInDown;
 -webkit-animation-duration: 0.5s;
 animation-duration: 0.5s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}

@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}

to {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}

.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

j查询

$('#box').on('mouseover', function () {

   $('#box_appear').addClass('slideInDown');


});
$('#box').on('mouseleave', function () {       
       $('#box_appear').addClass('slideInUp');
});

Answer 1

这只是一个优化提示，但由于您多次调用 $('$box_appear') 我会缓存它以减少查找。您也可以执行相同的#or $('#box')。

就您的主要问题而言，您需要删除在 mouseover/mouseleave 上添加的类。否则他们会互相否定:

$box = $('#box');
$boxAppear = $('#box_appear');

$box.on('mouseover', function () {
  $boxAppear
    .removeClass('slideInUp')
    .addClass('slideInDown');
}).on('mouseleave', function() {
  $boxAppear
    .removeClass('slideInDown');
    .addClass('slideInUp');
});