好吧,我在尝试使用滚动事件的条件对 DOM 的多个元素进行动画处理时遇到了问题。
首先,我使用的是 Drupal 7,所以我使用的 jQuery 库的版本是 1.4.4。
现在,我想通过更改页面内部元素的 css 属性来缩小页面向下滚动时标题的大小。
首先,在滚动事件中,我检查窗口的scrollTop 位置。如果位置不为 0(意味着页面向下滚动),我会触发标题内元素的动画。
如果位置等于零,我希望 css 属性回退到其原始状态,以便标头检索其完整大小。
动画的第一部分效果很好。当我向下滚动页面时,标题会按预期缩小。但是当我将页面滚动回顶部时,第二个动画不起作用..动画都是有问题的,并且在几秒钟后发生并变得疯狂,来回更改受animate()
功能。
有谁知道如何清除这个问题吗?
这是我正在使用的代码的简化部分:
$(window).scroll(function(){
if($(window).scrollTop() != 0){
$('#myFirstElement').animate({marginTop: '20px'}, 300);
$('#mySecondElement').animate({top: '20px'}, 300);
}
else {
$('#myFirstElement').animate({marginTop: '32px'}, 300);
$('#mySecondElement').animate({top: '32px'}, 300);
}
});
你可以使用类似的东西
http://jsfiddle.net/HjFH4/ http://jsfiddle.net/HjFH4/
$elem1 = $('#myFirstElement');
$elem2 = $('#mySecondElement');
var scrollState = 'top';
$(window).scroll(function(){
var scrollPos = $(window).scrollTop();
if( ( scrollPos != 0 ) && ( scrollState === 'top' ) ) {
$elem1.stop().animate({marginTop: '0px'}, 300);
$elem2.stop().animate({height: '10px'}, 300);
scrollState = 'scrolled';
}
else if( ( scrollPos === 0 ) && ( scrollState === 'scrolled' ) ) {
$elem1.stop().animate({marginTop: '32px'}, 300);
$elem2.stop().animate({height: '80px'}, 300);
scrollState = 'top';
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)