jquery – 页眉和页脚的幻灯片动画的区别

当我使用幻灯片动画(在这种情况下,我使用slidetoggle),我注意到滑动标题div和页脚div之间有区别.

当滑动页脚时,内容(在这种情况下为h1)会沿着背景滑动.标题div不是这样.似乎只有背景正在移动,而我希望标题以与页脚相同的方式滑动.

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

解决方法

而不是使用.slidetoggle()方便,您可以为标题元素的顶部属性设置动画,使其从屏幕滑出而不是更改高度.

例如,您可以使用.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/