jQuery实现滚动动画效果

Question

嗯，我在尝试使用滚动事件上，对DOM的多个元素进行动画处理时遇到了问题。 首先，因为我正在使用Drupal7，所以我使用的jQuery库版本为1.4.4。

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

所以首先，在滚动事件上，我检查窗口的scrollTop位置。 如果该位置与0不同（表示页面已经向下滚动），则在页眉内的元素上触发动画。

如果该位置等于零，则希望CSS属性恢复其原始状态，以便页眉恢复其完整大小。

第一部分动画效果很好。 当我向下滚动页面时，页眉像预期的那样缩小。 但是当我将页面滚回顶部时，第二个动画无法正常工作...动画都很混乱，并且会在几秒钟后出现，转而来回更改受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);
    }

});

- Gaetan Pralong

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

});

- Dom Day

---

是的，绝对没问题。sdespont的回答改善了动画的行为，但当我玩滚动条时仍然有一些错误。我想区别在于stop()函数。非常感谢Dom Day和你们三个的快速有效的回答！！ - Gaetan Pralong

感谢您的启示。我使用滚动位置和状态的组合来实现这个... http://jsfiddle.net/nMcxQ/1808/ - Kyle Kwon

Answer 2

问题在于用户滚动时会发生许多次“scroll”事件。每次事件发生时，您都要求JQuery开始一个动画。

仅在需要时执行动画：

var smallMenu = false;

$(window).scroll(function(){            

    if($(window).scrollTop() !== 0)
    {
        if(smallMenu === false)
        { 
            smallMenu = true;
            $('#myFirstElement').stop().animate({marginTop: '20px'}, 300);
            $('#mySecondElement').stop().animate({top: '20px'}, 300);
        }
    }       
    else 
    {
        if(smallMenu === true)
        { 
            smallMenu = false;
            $('#myFirstElement').stop().animate({marginTop: '32px'}, 300);
            $('#mySecondElement').stop().animate({top: '32px'}, 300);
        }
    }
});

- sdespont

---

现在这才是一个快速而完美的结局！！非常感谢sdespont，它完美地运行了！！ - Gaetan Pralong

Answer 3

尝试使用 .data 或其他方式保存动画的状态，并仅在状态与所需的相反状态时才进行动画。

$(window).scroll 在滚动时会重复触发。请参见 http://api.jquery.com/scroll/ 底部的实时示例。

因此，在滚动时，如果顶部不是零，则实际上会排队大量的动画事件，然后在向上滚动时引起冲突。

- Rick