Javascript jQuery.animate滚动问题

当is滚动超过视口高度时，我无法设置字体动画。它可以动画一次，但不能再回来

这样做有效，只需来回更改字体大小：

if ($(this).scrollTop() > $( window ).height()) {
               $('.nav li a').css({"font-size":"2vw"});
            } else {
               $('.nav li a').css({"font-size":"1.2vw"});
            }

但事实并非如此，它只会设置一次动画，然后在应该设置回动画时开始滞后和跳跃：

            if ($(this).scrollTop() > $( window ).height()) {
               $('.nav li a').animate({"font-size":"2vw"});
            } else {
               $('.nav li a').animate({"font-size":"1.2vw"});
            }

有人知道为什么吗？

---

谢谢

这是否需要在jQuery中设置动画？除非您尝试支持较旧的浏览器，否则您可以通过CSS3转换获得效果：

transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;

或仅限字体：

transition: font 0.3s ease;
-webkit-transition: font 0.3s ease;
-moz-transition: font 0.3s ease;
-o-transition: font 0.3s ease;
-ms-transition: font 0.3s ease;

---

然后，您可以使用.css方法更改字体大小，css转换将处理动画。

如果问题是您调用animate的次数太多，您可以尝试以下未经测试的代码，抱歉，我现在无法尝试：

var newState=$(this).scrollTop() > $( window ).height();


function updateOnScroll(e) {

    var oldState=newState;

    newState=$(this).scrollTop() > $( window ).height();

    if(oldState!=newState) {
        if(newState) {
            $('.nav li a').animate({"font-size":"100vw"});
        } else {
            $('.nav li a').animate({"font-size":"1.2vw"});
        }
     }
}

---

只是一个想法…

你能创建一个JSFIDLE吗。动画部分还可以，只是尝试了一下，但问题可能是：您何时调用此代码？您不希望在循环中连续调用animate。只要在$this.scrollTop>$窗口的高度状态发生变化时调用它，我会在scrollTop值大于视口高度值时调用代码。是的，但您什么时候测试它？如果它在循环中或在事件上，等等。。注意不要调用animate 1000 timesvar oldState=newState；var newState=$this.scrollTop>$window.height；我的祖国=newState{ifnewState{…animate…}else{…animateback…}当用户滚动经过特定点时，我使用jQuery设置动画。没有jQuery我可以这样做吗？您可以使用上面的CSS代码并使用您的第一个jQuery函数，即使用.CSS方法的函数，它将根据您的需要工作。