jquery - 页眉和页脚滑动动画的区别

Question

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

滑动页脚时，内容(在本例中为 h1)与背景一起滑动。 header div 不是这种情况。似乎只有背景在移动，而我希望页眉以与页脚相同的方式滑动。

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

Answer 1

与其使用方便的 .slideToggle()，不如为标题元素的 top 属性设置动画，使其滑出屏幕而不是改变高度。

例如，您可以使用 .data() 保存 header 的状态，并使用 .animate() 为 header 设置动画:

//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/