javascript - 如何在悬停时滑动切换()？

Question

我是 jQuery 的新手，我的基础知识还不错，但仍然无法通过高级使用弄清楚一些事情。

这是我的例子

    jQuery('.hp-single-service a').hover(function() {
      jQuery('.above-content').slideToggle("slow", function() {
        jQuery('.above-content').css({
          "height": "20%",
          "bottom": "0"
        });
        jQuery('.above-content-inner').css("padding-top", "2%");

      });
    });

.hp-single-service {
  float: left;
  width: 50%;
  height: 388px;
  border: 4px solid #f3a12b;
  overflow: hidden;
  position: relative;
  border-bottom: 0;
}
.above-content {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  background-color: #73214a;
  opacity: 0.9;
  filter: alpha(opacity=90);
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hp-single-service order-number-1">
  <a href="#">
    <div class="above-content order-number-1">
      <div class="above-content-inner">
        <span class="service-title">Service title</span>
        <span class="service-category">Service category</span>
      </div>
    </div>
    <img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
  </a>
</div>

我正在尝试创建 jQuery，它会在悬停时将 .above-content div 切换到高度:20%；底部:0；并给出 padding-top:2%; .above-content-inner div。

首先，我不确定 slideToggle() 是否适合此功能，所以如果有人有更好的建议，我愿意接受它，只是为了让它工作。

Answer 1

您甚至可以对 CSS 3 过渡执行相同的操作。请引用以下链接https://jsfiddle.net/osha90/4kyLgat1/

<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
  <div class="above-content-inner">
    <span class="service-title">Service title</span>
    <span class="service-category">Service category</span>
  </div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>

CSS 代码

    .hp-single-service {
  float: left;
  width: 50%;
  height: 388px;
  border: 4px solid #f3a12b;
  overflow: hidden;
  position: relative;
  border-bottom: 0;
}
.above-content {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  background-color: #73214a;
  opacity: 0.9;
  filter: alpha(opacity=90);
  height: 100%;
  width: 100%;
  bottom: 0%;
  transition: all 1s ease-out;
}
.hp-single-service a:hover .above-content{
  height: 20%;
  bottom: 0%;
}
.hp-single-service a:hover .above-content-inner{
  padding-top: 2%;
  transition: all 1s ease-out;
}