在页面顶部时更改div高度 - 长延迟? - jquery
对不起,如果这是最基本的问题 - 我是一个总新手,当谈到jquery/javascript!我已经看了一个答案,但我真的不知道要搜索什么!在页面顶部时更改div高度 - 长延迟? - jquery
我想有缩短固定的导航栏,如果用户不是在页面的顶部,这是对我工作的罚款:
$(document).ready(function(){
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() < 10) {
$('#headerContent').animate({paddingTop: '18px', paddingBottom:'18px'}, 300);
} else {
$('#headerContent').animate({padding: '0px'}, 300);
}
});
});
});
...但是当我滚动到页面的顶部时会出现相当大的延迟,这是什么原因造成的,我该如何解决这个问题?
这是因为scroll
事件被触发多次,每次它激发你排队一个新的动画..
您需要每次清除队列(使用.stop()
)..
if ($(this).scrollTop() < 10) {
$('#headerContent').stop(true, false).animate({
paddingTop: '18px',
paddingBottom: '18px'
}, 300);
} else {
$('#headerContent').stop(true, false).animate({
padding: '0px'
}, 300);
这工作,但给铬渲染线错误(webkit safari ???)。我们必须设置大纲属性来摆脱它:outline:1px solid transparent; http://jsfiddle.net/2NW6u/10/ – 2013-05-02 13:14:48
这正是我想要做的,谢谢! – David 2013-05-02 13:16:53
@roasted,它似乎在我的Chrome(* v.26.0.1410.64 *)中工作正常,但感谢可能有助于所有这些问题的建议。 – 2013-05-02 13:17:33
试试这个:
if ($(this).scrollTop() < 10) {
$('#headerContent').stop().animate({paddingTop: '18px', paddingBottom:'18px'},300);
} else {
$('#headerContent').stop().animate({padding: '0px'}, 300);
}
我尝试过类似的东西,但显然动画变得非常跳动 - 我真正想做的事情是将300ms延迟应用于实际动画(滑动效果),但立即开始,而不是在开始之前等待300ms,然后开始进一步300毫米,以增加身高......至少我认为这是最新情况! – David 2013-05-02 13:08:20
现在检查上面的内容。 – 2013-05-02 13:14:55
300毫秒延迟演示?? – 2013-05-02 13:04:34