当字体滚动超过视口(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"});
}
有人知道为什么吗? 谢谢!
最佳答案
这需要在 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 过渡将处理动画。
关于javascript - jQuery.animate 滚动问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23263595/