Javascript jQuery div悬停滑动效果

我这里有一个部门：

<div style="
width: 259px; 
height: 201px; 
background-color: #282c2f; 
box-shadow: 0px 8px 10px #000; 
border-radius: 10px; 
border: 2px solid #282c2f;">SHOP</div>

商店

当用户悬停时，灰盒需要滑入蓝盒。这样，新的颜色就会显示出来，一个链接就可以点击了

它应滑入：

<div style="
    width: 259px; 
    height: 201px; 
    background-color: #00e7b4; 
    box-shadow: 0px 8px 10px #000; 
    border-radius: 10px; 
    border: 2px solid #282c2f;"><a href="shop.htm">SHOP</div>

您可以链接。如果我理解正确，您可以这样做：

trigger.hover(function() {
    target.animate({top: 0}).animate({opacity : 0});
}

示例：
我相信这就是你想要实现的目标。我还没有测试过浏览器的兼容性，所以你可能想试试看。
基本上只需要添加一个额外的div，并在新div上使用slideDown

<div id="newTarget" style="display:none;width:100px; height:100px; background-color:teal; border: teal solid 1px; position:absolute;">
    <a id="newTargetLink" href="#">Link</a>
</div>



你想让黑匣子消失吗？可以将不透明度设置为0，作为动画功能的另一个选项。编辑：你的意思是这样的吗@DanielSanchez那到底会去哪里？抱歉，对jQuery来说真的很陌生。你在找这样的东西吗@丹尼尔桑切斯非常接近！看到了吗，黑色的会在青色的上面。因此，当你悬停时，黑色滑落，青色暴露。一旦滑落下来，在蓝绿色的顶部有一个链接。太棒了！我不得不将第一个div改为位置：绝对，这很有效！但是现在，在停止悬停后，如何让黑色div再次向上滑动？您可以尝试使用mouseenter和mouseout而不是hover。