滑动格（手风琴）

我要寻找一些好的jQuery的，XHTML & CSS代码来实现所看到如下图的效果jQuery代码：滑动格（手风琴）

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

显然，这是一个静态图像，应该发生的是文本，并且隐藏透明背景，并且当您将鼠标放在图像上时，它会在幻灯片上向下滑动。

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

来源

2010-02-23 fire

你可能有兴趣在这个伟大的资源：Sliding Boxes and captions

DEMO

来源

2010-02-23 16:04:03

我的方法是使用overflow: hidden和带有顶部边距的透明黑色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');  
);

，如果你必须把60像素的报价或不我忘了，或者如果你要通过60为int，玩它，但希望这可以让你开始。

来源

2010-02-23 16:01:37 saibot

@saibot - 你已经在你的'悬停（）'事件犯了一个错误。它应该有两个功能。现在，它将“margin-top”同时设置为60和100。此外，你错过了一个'}'。 – user113716 2010-02-23 16:15:52

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

插件被称为Showcase

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

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

HTH

来源

2010-02-23 16:02:59 FOR

滑动格（手风琴）

回答

相关问题