Question

当滚动超过视口高度时，我遇到动画字体的问题。它可以动画一次，但不能再回来......

这很有效，它只是来回改变字体大小：

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

有谁知道为什么？谢谢！

Answer 1

这需要在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转换将处理动画。

Answer 2

万一问题是您调用动画太多次，您可以尝试这样的事情（未经测试的代码，抱歉我现在不能尝试）：

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

只是一个想法......

jQuery.animate滚动问题

2 个答案: