javascript - 滑动面板在鼠标悬停时振荡

Question

我用 HTML 和 jQuery 构建了一个 div 容器，当您将鼠标悬停在它上面时，另一个面板会滑过顶部。但是我遇到的滑动面板“yoyo”一下。我认为这是因为当面板滑过 div 时，悬停状态被触发然后丢失，因此面板再次连续上下弹出。

我想要发生的是，当您将鼠标悬停在面板显示的正方形中的任何地方时，当您不在正方形中时，它不会显示。

这是一个 fiddle ，所以你可以看到问题是什么，也许这样更容易解释。

https://jsfiddle.net/xa5gtd2u/3/

还有代码

HTML

<div class="container">
  <div class="services-blocks">
    <img class="alignnone size-full wp-image-1974" src="http://placehold.it/250x250" alt="Design" width="250" height="250" />
    <h3>title here</h3>
  </div>
  <div class="services-slide-panel">
  <h3>title here</h3>
    Some text here
    Some text here
    Some text here
    Some text here
  </div>
</div>

CSS

    .services-slide-panel {

  background: #f3535e;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  display: none;
  color: #ffffff;

}

.services-slide-panel h3 {

  color: #ffffff;

}

.services-blocks h3 {

  text-align: center;
  position: absolute;
  bottom: 5%;
  width: 100%;
  color: #ffffff;

}

.container {

  width: 250px;
  height: 250px;
  position: relative;
}

jQuery

      $(document).ready(function() {


    $(".services-blocks").hover(function() {

      $(this).next(".services-slide-panel").slideToggle("slow");

    });

  });

Answer 1

CSS3 过渡始终是实现此类效果的更好选择。此外你必须 hover()在 .container否则，滑入的 div 将改为悬停，并且将调用 hover() 的 hoverout 部分。功能。

  $(document).ready(function() {


    $(".container").hover(function() {

      $(this).find(".services-slide-panel").addClass("slow");

    }, function() {
      $(this).find(".services-slide-panel").removeClass("slow");

    });

  });

.services-slide-panel {
  background: #f3535e;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 110%;
  color: #ffffff;
  transition: all 0.3s ease;
}

.services-slide-panel.slow {
  top: 0%;
}

.services-slide-panel h3 {
  color: #ffffff;
}

.services-blocks h3 {
  text-align: center;
  position: absolute;
  bottom: 5%;
  width: 100%;
  color: #ffffff;
}

.container {
  width: 250px;
  height: 250px;
  position: relative;
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="services-blocks">
    <img class="alignnone size-full wp-image-1974" src="http://placehold.it/250x250" alt="Design" width="250" height="250" />
    <h3>title here</h3>
  </div>
  <div class="services-slide-panel">
    <h3>title here</h3> Some text here Some text here Some text here Some text here
  </div>
</div>

Fiddle here