JQuery:推送效果？

Question

我目前正在使用JQuery slideDown/slideUp效果,并没有完成我想要的.

本质上,我想创建一个动作,我将一个div"推"出浏览器窗口的顶部.

类似于以下推送效果示例的东西.

我怎么能用JQuery做到这一点？

使用slideDown/slideUp的问题是另一个DIV只重叠了我隐藏的div.但相反,我想推动我不想在浏览器窗口顶部看到的div.

Answer 1

制作两个div,一个在另一个内.使用CSS,定义外部的高度并设置overflow: hidden.这意味着如果内部div的内容太长,它将是不可见的.

 ____ _____ ____
|    | ooo |    |   <-- this is the outer div
|____|_____|____|
     | xxx |       ooo -> visible
     |_____|       xxx -> invisible

        ^-- this is the inner div

无论你想滑动什么内部div.现在你需要做的就是向上移动内部div:

      _____
     | ooo |
 ____|_____|____
|    | xxx |    |     now, ooo -> invisible
|____|_____|____|          xxx -> visible

这可以使用jQuery的animate功能完成.

$('#innerDiv').animate({
    top: -50px
});