当我使用幻灯片动画(在这种情况下,我使用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 }); } });
原文地址:https://www.jb51.cc/jquery/176500.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。