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

我正在寻找一些好的jQuery、XHTML和CSS代码，以实现下图所示的效果：

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

---

我认为这是一个手风琴，有人能给我指出正确的方向吗（或者你可能看到过另一个这样做的网站）？

我的方法是用

overflow:hidden

创建一个div，并使用透明的黑色div，顶部空白将其放置在容器的“外部”。使用

.hover（）

您可以告诉black div在鼠标悬停在容器div上时向上滑动，在鼠标离开时再次滑动

标记：

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

还有你的剧本：

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

---

我忘了你是否必须把60px加引号，或者如果你必须把60作为一个整数通过，那就玩玩它吧，但希望这能让你开始学习。

我最近使用了一个jquery插件，它做了类似的事情。 您可能会发现插件可以满足您的所有需要，或者查看源代码以了解幻灯片效果是如何实现的（当然，任何事情都有不止一种方法）

该插件称为

有更多信息、演示和教程

最后，作为添加的演示

---

HTH

您可能对这一伟大的资源感兴趣：

---

@saibot-您在

hover（）

事件中犯了一个错误。它应该包含两个函数。现在，它正在同时将

边距顶部设置为60和100。此外，您缺少一个
。
$('#container').hover (
   function () {
      $('#slider').css('margin-top', '60px'),
      $('#slider').css('margin-top', '100px');       
);