javascript - jQuery.animate scroll issues -

i have problem animating font when scrolls past viewport height. can animate once not again...

this works, changes font size , forth:

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

but not, animates once starts lag , jump when should animate back:

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

does know why? thanks!

does need animated in jquery? can effect css3 transitions (unless you're trying support older browsers):

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

or font only:

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; 

you can use .css() method change font-size , css transition handle animation.