如何在悬停时slideToggle（）？

Question

我对jQuery很新，而且我对基础知识做得很好，但仍然无法通过提前使用来弄清楚一些事情。

这是我的例子

＆＃13;

＆＃13;

    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%");

      });
    });

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我试图创建jQuery，它将悬停切换.above-content div到高度：20％;底部：0;并给予填充顶部：2％;到.above-content-inner div。

首先，我不确定slideToggle（）是否适合此功能，所以如果有人有更好的建议，我可以打开它，只是为了让它发挥作用。

Answer 1

我相信你正在寻找类似的东西：

＆＃13;

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

<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>
<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>

＆＃13;

＆＃13;

＆＃13;

请勿忘记.hover()将两个回调函数作为参数 - 第一个是mouseover，第二个是mouseout。

Answer 2

你甚至可以对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;
}