如何用jQuery实现类似于facebook“New Stories”按钮的slideToggle效果?

时间:2011-11-02 14:51:43

标签: facebook toggle jquery

正如您可能知道的不久前,facebook添加了几项新功能。其中一个是“新故事”按钮,点击时会展开(我猜是幻灯片切换效果)并显示新故事。


以下是我所说的按钮:

FaceBook toogle Button


我想知道如何在jQuery的帮助下点击此按钮后实现相同的幻灯片/切换效果和淡入效果。

我尝试在互联网上搜索这个,但我找到的所有效果都是常规的slideToggle效果,我的意思是他们开始从顶部显示div并向下滑到底部(这是我的意思是常规内容http://jsfiddle.net/TwxB4/) ,当一个Facebook使用从隐藏div的底部开始,并将幻灯片排序到它的顶部。 (如果你在facebook上查看,我会明白我的意思。)

编辑:我只是在寻找一个slideToggle效果而不是其他任何东西,当用户点击获得效果的链接时,我希望能够扩展和缩小隐藏的div。


编辑:以下是我正在寻找的效果的说明:

illustration

3 个答案:

答案 0 :(得分:2)

此示例按您所描述的方式工作,首先显示底部内容:

http://jsfiddle.net/SBLNn/16/

此处也是全屏视图:

http://jsfiddle.net/SBLNn/16/embedded/result/

他们也可以通过隐藏Feed的溢出,然后在内部Feed包装器上设置负边距来实现,然后当您单击它们时,只需将该负边距设置为0。

答案 1 :(得分:1)

这对你有用吗? http://jsfiddle.net/wb7h6/1/

更新版本 http://jsfiddle.net/wb7h6/9/我希望这就是你需要的东西

答案 2 :(得分:0)

我想要slideToggle()。请参阅this jsFiddle