滑動格（手風琴）

我要尋找一些好的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

滑動格（手風琴）

回答

相關問題