javascript - jQuery.animate 滚动问题

Question

当字体滚动超过视口(viewport)高度时，我在对字体进行动画处理时遇到问题。它可以动画一次但不能再次返回...

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

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 过渡将处理动画。