使用 jQuery 滚动动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17572574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animate on scroll with jQuery
提问by Gaetan Pralong
Ok, I'm facing an issue when trying to animate several elements of the DOM, using a condition on a scroll event. First of all, I'm using Drupal 7 so the jQuery library I'm using is of version 1.4.4.
好的，我在尝试使用滚动事件的条件为 DOM 的多个元素设置动画时遇到了一个问题。首先，我使用的是 Drupal 7，所以我使用的 jQuery 库是 1.4.4 版。
Now, I want to shrink the size of my header when the page srolls down by changing css properties of elements inside of it.
现在，当页面向下滚动时，我想通过更改其中元素的 css 属性来缩小页眉的大小。
So first, on the scroll event, I check the scrollTop position of the window. If the position is different than 0 (meaning that the page is scrolled down), I trigger the animation on the elements inside the header.
所以首先，在滚动事件上，我检查窗口的 scrollTop 位置。如果位置不同于 0（意味着页面向下滚动），我会在标题内的元素上触发动画。
If the position is equal to zero, I want the css properties to fall back to their original state so the header retrieve its full size.
如果位置等于零，我希望 css 属性回退到它们的原始状态，以便标题检索其完整大小。
The first part of the animation works fine. When I scroll down the page, the header shrinks as expected. But when I scroll the page back up to the top, the second animation doesn't work.. the animations are all buggy and occur after several second and go wild, changing back and forth the css properties affected by the animate()function.
动画的第一部分工作正常。当我向下滚动页面时，标题会按预期缩小。但是当我将页面向上滚动到顶部时，第二个动画不起作用..动画都是错误的，并且在几秒钟后发生并且变得疯狂，来回改变受animate()函数影响的 css 属性。
Does anyone have a clue on how to clear this out ??
有没有人知道如何清除它？
Here is the simplified portion of the code I'm using:
这是我正在使用的代码的简化部分：
$(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);
}
});
回答by Dom Day
you can use something like
你可以使用类似的东西
$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';
}
});
回答by sdespont
The problem is that the scrollevent occurred many many times durring user scrolling action.
And every times, you ask JQuery to start an animation.
问题是在scroll用户滚动操作期间该事件发生了很多次。并且每次都要求 JQuery 启动动画。
You should only do the animation if needed :
你应该只在需要时做动画：
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);
}
}
});
回答by Rick
Try using .dataor something to save the state of the animation, and only animate it when the state is the opposite of what you want.
尝试使用.data或什么来保存动画的状态，并且仅在状态与您想要的相反时才对其进行动画处理。
$(window).scrolltriggers repeatedly while you're scrolling. See the live example at the bottom of http://api.jquery.com/scroll/
$(window).scroll滚动时反复触发。请参阅http://api.jquery.com/scroll/底部的实时示例
So it seems to me that while scrolling, and the top is not zero, it's actually queueing up a ton of animation events, which then cause conflict when you scroll back up.
所以在我看来，在滚动时，顶部不为零，它实际上排队了大量的动画事件，当你向上滚动时会导致冲突。
