使用jQuery滚动动画

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

现在，我想缩小页眉的大小，当页面向下滚动时，通过改变其内部元素的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); 
    } 

});

来源

2013-07-10 Gaetan Pralong

，你可以使用类似

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

});

来源

2013-07-10 15:01:28

是的，绝对适合我。 sdespont的回答改善了动画的行为，但我仍然在使用滚动时感到烦恼。我猜是什么导致了差异，是stop（）函数。非常感谢Dom Day和你三个快速有效的答案！ –

感谢您的大开眼界。我用滚动位置和状态的组合来做到这一点... http://jsfiddle.net/nMcxQ/1808/ –

尝试使用.data或东西保存动画的状态，只有它的动画时的状态是什么，你的对面想。

$(window).scroll在滚动时反复触发。看到的http://api.jquery.com/scroll/

底部的活生生的例子所以，在我看来，虽然滚动，顶部不为零，它实际上排队一吨动画事件，然后引起冲突，当你向后滚动起来的。

来源

2013-07-10 14:07:37 Rick

感谢里克！我会看看这个，让知道... –

问题在于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); 
     } 
    } 
});

来源

2013-07-10 14:17:52 sdespont

现在这是一个快速的好结局！感谢数千次的折叠，它完美无缺！ –

使用jQuery滚动动画

回答

相关问题