javascript - 我怎样才能阻止这个 jQuery 出问题？

Question

所以我试图创建一个有两层的盒子:前层和后层。它们将堆叠在一起，因此默认情况下隐藏后层。

当您将鼠标悬停在框的顶部(从技术上讲是前层)时，前层应该会向上滑动，露出后层。我尝试通过使用 .slideUp() 和 .slideDown() 来做到这一点，但它一直在同时显示两个层。所以后来我切换到 .slideUp() 和 .fadeIn() 但这似乎没有太大帮助。

如您所见，它有时会在不应该显示的情况下同时显示两个 div，并且还会随机滑动多次。我怎样才能使它更有效率？

这是一个JsFiddle

更新:

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers.

这就是人们投票关闭此答案的原因...从该列表中，这个问题没有什么？

Desired behavior? - Check
Specific problem? - Check
Shortest code necessary? - Check
Clear problem? - check

Answer 1

slideUp 和 slideDown 并不是真的需要，使用 transform 和 transition CSS3 属性就可以实现滑动效果。

更新的 JS fiddle :https://jsfiddle.net/9uw2q24h/3/

Javascript:

$('.outer').hover(function() {
  $(this).children('.front').addClass('front-up');
}, function() {
  $(this).children('.front').removeClass('front-up');
});

CSS:

.outer {
  position: relative;

  .front,
  .back {
    text-align: center;
    width: 100%;
  }
  .back {
    display: block;
  }
  .front {
    position: absolute;
    transition: 0.5s ease;
  }
  .front-up {
    transform: translateY(-100%);
  }
}

如果您必须支持旧版浏览器，请确保将 vendor 前缀添加到转换和转换规则(-webkit-、-moz- 等)。