Javascript 如何在悬停时滑动切换（）？

我对jQuery非常陌生，而且我在基础知识方面做得很好，但仍然无法通过提前使用了解一些事情

这是我的例子

jQuery（'.hp单一服务a'）.hover（函数（）{
jQuery（'.over content'）.slideToggle（“slow”，function（））{
jQuery（'.over content'）.css({
“高度”：“20%”，
“底部”：“0”
});
jQuery（'.over-content-inner'）.css（“padding-top”，“2%”）；
});
});
.hp单一服务{
浮动：左；
宽度：50%；
高度：388px；
边框：4px实心#f3a12b；
溢出：隐藏；
位置：相对位置；
边界底部：0；
}
.以上内容{
位置：绝对位置；
z指数：1；
左：0；
右：0；
背景色：#73214a；
不透明度：0.9；
过滤器：α（不透明度=90）；
身高：100%；
宽度：100%；
}
我相信您正在寻找这样的产品：


jQuery（'.hp单一服务a'）.hover（函数（）{
jQuery（this）.find（'.over content'）.animate({
“高度”：“20%”，
“底部”：“0”
});
jQuery（this）.find（'.over-content-inner'）.css（“padding-top”，“2%”）；
},
函数（）{
jQuery（this）.find（'.over content'）.animate({
“高度”：“100%”，
“底部”：“自动”
});
jQuery（this.find（'.over-content-inner'）.css（“padding-top”，“0”）；
});
.hp单一服务{
浮动：左；
宽度：50%；
高度：388px；
边框：4px实心#f3a12b；
溢出：隐藏；
位置：相对位置；
边界底部：0；
}
.以上内容{
位置：绝对位置；
z指数：1；
左：0；
右：0；
背景色：#73214a；
不透明度：0.9；
过滤器：α（不透明度=90）；
身高：100%；
宽度：100%；
}
您甚至可以对CSS 3转换执行相同的操作。请参考以下链接

是的，这正是我需要的，只是我需要一些修复。我忘了写这篇文章了。hp单一服务并不是页面上唯一的一项服务，我有它们的列表，所以我只需要悬停一项就可以了。你能改变一下吗？当然，我用了
$（this）
和
.find（）
来实现它。这正是我需要的！多谢各位！你救了我一天！：）哦我从来没有想过CSS3，我应该，这是一个更简单的解决方案，正如我所看到的，我需要玩一点过渡。您的示例在我的案例中效果不好，我不知道为什么，因为您在JSFIDLE上的示例效果很好。鼠标悬停是可以的，但当我移动鼠标时，我不知道为什么（你知道如何解决这个问题吗？你能和我分享你的代码吗？这会让我更好地理解错误所在。我认为问题在于你在hover上添加了转换属性。直接将它添加到。上面的内容类。转换属性必须是转换：所有1都释放；并且在“.hp single service a:hover.above content”类您可以删除转换属性。这将正常工作。我做到了，我先尝试了，但现在看到了结果。不太好。：（好的，我看到了发生的情况。请将底部：0%；属性添加到“.above content”类并将其从中删除。”.hp单一服务a：悬停在“内容”类上方
<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>

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