当我使用幻灯片动画(在这种情况下,我使用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/
