Question

HTML：

<div class="wrap">
     <span class="button"></span>
     <div class="element"></div>
</div>

JS：

$('.button').on('mouseenter', function () {
  $('.element').addClass('active');
}).on('mouseleave', function () {
  $('.element').removeClass('active');
});
$('.element').on('mouseenter', function () {
  $('.element').addClass('active');
}).on('mouseleave', function () {
  $('.element').removeClass('active');
});

http://jsfiddle.net/e4p98cwb/1/

当您将鼠标悬停在黑色元素上时，蓝色元素会进入屏幕。之后如果你在空白区域悬停一秒钟，蓝色的那个开始逃离屏幕，但是如果你快速盘旋它占用的空白区域，那么可能会发生两件事情： 1.蓝色的一个完全显示在屏幕上要么 2.跳转一次或两次，然后继续离开屏幕

在悬停和鼠标悬停事件上也会发生同样的情况。为什么会发生这种情况？是否有解决此问题的方法？

Answer 1

解决JS问题的最简单方法就是让CSS来处理它。如果将其添加到.button:hover + .element, .element:hover { -webkit-transform: translateX(0); transform: translateX(0); }状态，它将起作用：

.wrap {
    position: relative;
    width: 600px;
    height: 600px;
    overflow: hidden;
    border: 2px solid red;
}
.button{
    width: 100px;
    height: 50px;
    display: block;
    background: #333;
}
.element {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99999;
    width: 500px;
    height: 630px;
    background: blue;
    -webkit-transform: translateX(630px);
    transform: translateX(630px);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;    
}
.button:hover + .element,
.element:hover {
    -webkit-transform: translateX(0);
    transform: translateX(0);    
}

请参阅下面的实施。这也为你节省了大量的JS。

＆＃13;

<div class="wrap">
    <span class="button"></span>
    <div class="element"></div>
</div>

＆＃13;

.wrap {
    position: relative;
    width: 600px;
    height: 600px;
    overflow: hidden;
    border: 2px solid red;
}
.button{
    width: 100px;
    height: 50px;
    display: block;
    background: #333;
}
.element {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99999;
    width: 500px;
    height: 630px;
    background: blue;
    right: -100%;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;    
}
.button:hover + .element,
.element:hover {
    right: 0;   
}

＆＃13;

更新

发生这种情况的原因是因为元素本身仍然占据相同的空间。这与翻译没有实际移动元素，而是转换它有关。一旦将光标从任何可激活的元素上移开，它就会缩回，但由于它的动画效果仍然占据相同的空间，因此可以将光标悬停在该空间上并重新触发动画。我相信它是因为这个转换只在完成动画后才完全应用。让我们测试一下这个理论：

＆＃13;

<div class="wrap">
    <span class="button"></span>
    <div class="element"></div>
</div>

＆＃13;

absolute

＆＃13;

在这一个中，我们只是使用tranform定位，问题就消失了，这意味着cameraList实际上导致元素仍占据相同的空间。直到动画结束。

跳跃在空的空间的动画

1 个答案:

更新