当你被甩掉时，你怎么称呼从另一个div下面滑出的div？

Question

我正在尝试创建一个Javascript效果，我相信我以前见过很多次。但是，我似乎找不到合适的术语。它不是“滑块”，“滑出菜单”或“滑出标签”或“标签”。到目前为止，这些条款已经导致谷歌带我去做各种各样的例子和教程，用于那些不是我追求的事情。

我所追求的效果是这样的：

Div 2位于Div 1之后，直到用户将鼠标悬停在Div 2的可见部分上，这导致它滑出以显示更多自身。当用户将鼠标移开时，Div 2会滑回Div 1下方。

你怎么称呼这个效果，以便我可以找到它的turorials或Javascript代码？或者，如果有人可以指导我做一个例子或解释如何做，那就太好了。

2 个答案:

答案 0 :(得分：1)

您可以使用z-index将div1置于div2之上，然后您可以使用CSS animation，jQuery animation来更改div2的位置，也可以调整div2的宽度。< / p>

答案 1 :(得分：1)

我为一个可怕的代码感到抱歉，但你需要这样的东西吗？ http://jsfiddle.net/D7Z8v/

$("#smalldiv").hover(function() {
$("#smalldiv").animate({marginLeft: 200});       
}, function() {
$("#smalldiv").animate({marginLeft: 0});
});

您可能需要在更合适的位置更改悬停功能中的“marginLeft”，但它看起来就像您需要的那样。

Answer 1

您可以使用z-index将div1置于div2之上，然后您可以使用CSS animation，jQuery animation来更改div2的位置，也可以调整div2的宽度。< / p>

Answer 2

我为一个可怕的代码感到抱歉，但你需要这样的东西吗？ http://jsfiddle.net/D7Z8v/

$("#smalldiv").hover(function() {
$("#smalldiv").animate({marginLeft: 200});       
}, function() {
$("#smalldiv").animate({marginLeft: 0});
});

您可能需要在更合适的位置更改悬停功能中的“marginLeft”，但它看起来就像您需要的那样。