jquery - 使用 jQuery 实现滚动动画

Question

好吧，我在尝试使用滚动事件的条件对 DOM 的多个元素进行动画处理时遇到了问题。首先，我使用的是 Drupal 7，所以我使用的 jQuery 库的版本是 1.4.4。

现在，我想通过更改页面内部元素的 css 属性来缩小页面向下滚动时标题的大小。

首先，在滚动事件中，我检查窗口的scrollTop 位置。如果位置不为 0(意味着页面向下滚动)，我会触发标题内元素的动画。

如果位置等于 0，我希望 css 属性回退到其原始状态，以便 header 检索其完整大小。

动画的第一部分效果很好。当我向下滚动页面时，标题会按预期缩小。但是当我将页面滚动回顶部时，第二个动画不起作用..动画都是有问题的，并且在几秒钟后发生并变得疯狂，来回更改受 animate( 影响的 css 属性) ) 函数。

有谁知道如何清除这个问题吗？

这是我正在使用的代码的简化部分:

$(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);
    }

});

Answer 1

你可以使用类似的东西

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';
    }

});