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

【问题标题】：jQuery code for sliding div (accordion)用于滑动 div 的 jQuery 代码（手风琴）
【发布时间】：2010-02-23 15:51:43
【问题描述】：

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

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

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

我认为这是一个手风琴，谁能指出我正确的方向（或者也许你已经看到另一个网站这样做）？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

您可能对这个很棒的资源感兴趣：Sliding Boxes and captions

DEMO

【讨论】：

【解决方案2】：

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

插件名为Showcase

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

最后，作为一个添加的演示，here's the site where I used it。

HTH

【讨论】：

【解决方案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 传递，请尝试一下，但希望这可以帮助您入门。

【讨论】：

@saibot - 你在hover() 事件中犯了一个错误。它应该具有两个功能。现在，它同时将margin-top 设置为 60 和 100。此外，您还缺少}。