Question

我正在寻找一些好的jQuery，XHTML＆amp;用于实现效果的CSS代码如下图所示：

http://i48.tinypic.com/a3o4sn.jpg

显然这是一个静态图像，应该发生的是文本和透明背景被隐藏，当你将鼠标放在图像上时，它会向上滑动到视图中并再次向下滑动。

我认为这是一支手风琴，任何人都可以指出我正确的方向（或者你看过另一个网站这样做了吗？）

Answer 1

我最近使用了一个jquery插件，它做了类似的事情。您可能会发现插件可以满足您的所有需求，或者查看源代码以了解如何实现滑入效果（当然，有多种方法可以执行任何操作）。

该插件名为Showcase

Its home page有更多信息，演示和教程

最后，作为附加演示，here's the site where I used it。

HTH

Answer 2

您可能对以下资源感兴趣：Sliding Boxes and captions

<强> DEMO

Answer 3

我对此效果的处理方法是使用带有overflow: hidden的div和带有上边距的透明黑色div，将其置于容器“外部”。使用.hover()可以告诉黑色div当鼠标悬停在容器div上时向上滑动，当鼠标离开时再次向外滑动。

标记：

<div id='container'>
   <div id='slider'>Some Text</div>
</div>

样式：

div#container {
    height: 100px;
    width: 100px;
    overflow: hidden;
}

div#slider {
    width: 100px;
    height: 40px;
    margin-top: 100px;
    background: black;
}

你的剧本：

$('#container').hover (
   function () {
      $('#slider').css('margin-top', '60px'),
      $('#slider').css('margin-top', '100px');       
);

我忘记了你是否必须将60px放在引号中，或者如果你必须将60作为int传递，请使用它，但希望这可以让你开始。

用于滑动div（手风琴）的jQuery代码

3 个答案: