javascript - jQuery幻灯片内容不在页面底部

我试图弄清楚如何从页面底部滑出内容。我已经弄清楚了如何使其向下滚动到页面底部而不是关闭。例如，当单击图像时，它应滑出页面底部。问题在于它只是将内容压低了。我想我需要一个overflow:hidden类型的东西

到目前为止，这就是我所拥有的。

的HTML

<div id="myGallery">
    <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"/>
</div>

的JavaScript

$('#myGallery').click(function() {
    $(this).animate({
        top: $(document).height() + 300 }, 1500);
     return false;
});

小提琴：http://jsfiddle.net/BandonRandon/wykR7/4/
小提琴全屏显示：http://jsfiddle.net/BandonRandon/wykR7/4/embedded/result/

编辑：对正文的Overflow:hidden仅在正文内容的长度不超过浏览器窗口时才起作用。请参阅问题更新的小提琴：
http://jsfiddle.net/BandonRandon/wykR7/11/
http://jsfiddle.net/BandonRandon/wykR7/11/embedded/result/

具体用法请参见http://bandonrandon.com/blog（单击拿着灯光的女孩）

最佳答案

jsBin demo

CSS：

#girl{
    position:absolute;
    top:0px;
}
#content{
    position:absolute;
    top:20px;
    left:300px;
    width:400px;
}
  #girl_wrapper{
    position:absolute;
    top:0px;
    overflow:hidden;
}

HTML：

<div id="girl">
    <img src="http://bandonrandon.com/wp-content/themes/BR2011/images/xmas/brooke_xmas.png" class="active" />
</div>

<div id="content">
  Cras volutpat mattis ullamcorper. Mauris sit amet sapien non quam  convallis fermentum. Nunc mauris est, dapibus in imperdiet commodo,  egestas et est. Sed tortor enim, adipiscing in consectetur quis, luc...

more and more IPSUM ...
</div>

jQuery的：

var girlW = $('#girl').width();

$('#girl').click(function() {
    var winH = $(window).height();
    $(this)
      .wrap('<div id="girl_wrapper" style="height:'+winH+'px; width: '+girlW+'px"/>')
      .animate({top: winH}, 1500 )
    ;
    return false;
});

我的想法是（单击）将带图像的DIV包装到一个绝对定位的元素中，该元素将根据window height和girl image width动态设置其宽度和高度，但隐藏了溢出。
这样做，女孩动画将在该元素内发生。

动画制作完成后，我建议还是使用.remove()该包装器（如果您不再需要girl元素），以防止div不允许单击下面的可能的将来元素。

询问您是否有疑问！

祝您编程/设计愉快！