Question

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

当您将鼠标悬停在盒子的顶部（技术上是前层）时，前层应该向上滑动，露出后层。我试图通过使用.slideUp()和.slideDown()来做到这一点，但它同时不断地揭示两个层。所以我切换到.slideUp()和.fadeIn()，但这似乎没有太多帮助。

正如您所看到的，它有时会显示两个不应该显示的div，并且它也会随机滑动多次。我怎样才能提高效率呢？

这是JsFiddle

更新：

寻求调试帮助的问题（＆＃34;为什么这段代码不起作用？＆＃34;）必须包括所需的行为，特定的问题或错误在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他问题没有用读者。

这就是人们投票结束这个答案的原因......这个问题从这个清单中没有什么问题？

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

Answer 1

您不需要使用slideUp和slideDown，可以使用转换和转换CSS3属性来实现幻灯片效果。

更新了JS小提琴：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%);
  }
}

如果您必须支持旧浏览器，请确保将转发规则和转换规则添加到供应商前缀（-webkit-，-moz-等）。

Answer 2

您可以这样做：

var running = false;
$('.outer').hover(function() {
  if (!running) {
    running = true;
    $(this).children('.front').slideUp(function() {
      $(this).next('.back').slideDown(function() {
        running = false;
      });
    });
  }
}, function() {
  if (!running) {
    running = true;
    $(this).children('.back').slideUp(function() {
      $(this).prev('.front').slideDown(function() {
          running = false;
      });
    });
  }
});

解释：动画一开始就将状态保存在变量中以避免冲突（否则会再次调用）。此外，slideDown和slideUp相结合，您可以获得更加流畅的动画效果。使用fadeOut和slideDown

的组合，你的闪烁效果不是很好

小提琴：https://jsfiddle.net/dL7ckq6b/

Answer 3

稍微调整一下你的CSS，特别是制作你的元素＆＃39; position属性absolute，会使你的后面元素从一开始就在你的前面元素后面，现在你只需要显示/隐藏你的前面元素。

<强>使用Javascript：

$('.outer').hover(function() {
$('.front').slideUp();
    console.log("IN");  
}, function() {
  $('.front').slideDown();
  console.log("OUT");  
});

我还更新了CSS以更清楚地显示正在发生的效果。

<强> CSS：

.outer {
  .front,
  .back {
    text-align: center;
    position: absolute;
    padding: 20px 10px;
    border: 2px solid yellow;
  }

  .front {
    z-index: 10;
    background-color: red;
  }

  .back {
    z-index: 0;
    background-color: blue;
  }
}

这是JSFiddle：https://jsfiddle.net/z8e7eb4b/

我怎样才能阻止这个jQuery被淘汰？

3 个答案: