页眉和页脚的幻灯片动画的差异

Question

当我使用幻灯片动画时(在本例中我使用了slideToggle),我注意到滑动标题div和页脚div之间存在差异.

滑动页脚时,内容(在本例中为h1)与背景很好地滑动.标题div不是这种情况.似乎只有背景在移动,而我希望标题以与页脚相同的方式滑动.

请查看我在jsFiddle上制作的演示.谢谢.

Answer 1

而不是使用.slideToggle()它很方便,你可以动画头元素的top所以它滑出屏幕,而不是改变height属性.

例如,您可以使用以下方法保存标头的状态.data()并为标头设置动画.animate():

//set the initial state and bind click event handler
$('#toggleHeader').data('state', 0).bind('click',function(){

    //if the header is showing
    if ($(this).data('state') === 0) {

        //set state to not showing
        $(this).data('state', 1);

        //animate header element out-of-view
        $('#header').stop(true).animate({ top : -102 });
    } else {

        //set state to showing
        $(this).data('state', 0);

        //animate header element into view
        $('#header').stop(true).animate({ top : 0 });
    }
});     

这是一个演示:http://jsfiddle.net/xhFz7/3/

Answer 2

Jasper 的修复确实有效，但 ThatSteveGuy 的解释也是正确的。要使用 ThatSteveGuy 的推理解决问题并仍然保留所有旧代码，请将以下内容添加到 CSS 中：

\n\n

#header h1 {\n  position:absolute;\n  text-align:center;\n  width:100%;\n  margin:0px;\n  bottom:40px;\n}\n

\n\n

\xe2\x80\x8bas 在这里看到http://jsfiddle.net/xhFz7/58/

\n