Question

我在这里有这个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>

有什么地方可以看到类似于这种效果的效果吗？也许是插件建议？不知道如何开始这个。

非常类似于我正在寻找的东西，除了黑色从幻灯片滑出时消失：http://jsfiddle.net/bUcZg/

Answer 1

您可以链接animations in jQuery。如果我理解你，你可以这样做：

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

示例：http://jsfiddle.net/bUcZg/21/

Answer 2

我相信这是你想要完成的。我没有测试浏览器兼容性，所以你可能想要这样做并玩它。基本上只需添加一个额外的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>

http://jsfiddle.net/bUcZg/22/

jQuery div悬停幻灯片效果

2 个答案: