Question

好的，我在尝试使用滚动事件的条件动画DOM的几个元素时遇到问题。首先，我使用的是Drupal 7，因此我使用的jQuery库是1.4.4版本。

现在，我希望在页面向下滚动时缩小页眉的大小，方法是更改其中元素的css属性。

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

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

动画的第一部分工作正常。当我向下滚动页面时，标题会按预期收缩。但是当我将页面向上滚动到顶部时，第二个动画不起作用..动画都是错误的并且在几秒钟之后发生并且变得狂野，来回改变受{{1影响的css属性功能。

有没有人知道如何清除它？

以下是我使用的代码的简化部分：

animate()

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

});

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

Answer 3

尝试使用.data或其他内容来保存动画的状态，并仅在状态与您想要的状态相反时进行动画处理。

在滚动时，

$(window).scroll会反复触发。请参阅http://api.jquery.com/scroll/

底部的实时示例

所以在我看来，在滚动时，顶部不为零，它实际上排队了大量的动画事件，然后当你向后滚动时会引起冲突。

使用jQuery动画滚动

3 个答案: