Javascript jquery设置线条高度动画-可能吗？

关于jquery中animate属性的快速问题，可以设置动画吗

我不知道怎么做？ 这是我的html

<nav>
  <a href="">Page 1</a>
  <a href="">Page 2</a>
  <a href="">Page 3</a>
  <a href="">Page 4</a>
  <a href="">Page 5</a>
  <a href="">Page 6</a>
</nav>
<div style="height:9000px;"></div>

还有一种方法可以使导航和a标记的动画同步

谢谢

ps抱歉，如果这是一个非常基本的问题-我是jquery新手

---

给你，这是你在动画功能中的线条高度，应该是“线条高度”

$(function(){
   $('nav').data('size','big');
});

$(window).scroll(function(){
    var $nav = $('nav');
    var $a = $('nav > a');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            $nav.data('size','small').stop().animate({
                height:'40px',
                'line-height':'40px'
            }, 300);
            $a.data('size','small').stop().animate({
                height:'20px'
            }, 300);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size','big').stop().animate({
                height:'100px',
                'line-height':'40px'
            }, 300);
            $a.data('size','big').stop().animate({
                height:'40px'
            }, 300);


        }  
    }
});

---

可以设置动画，使您获得要移动的元素或其他东西，并为此设置正确的属性。我建议阅读一些jQuery动画。此外，您需要引用

行高

（

'line-height'

），否则属性名称中的

-

将被解释为数学运算符，

行和
高度
将被解释为（未声明的）变量。这可能是related@DavidThomas谢谢，这很有帮助
$(function(){
   $('nav').data('size','big');
});

$(window).scroll(function(){
    var $nav = $('nav');
    var $a = $('nav > a');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            $nav.data('size','small').stop().animate({
                height:'40px',
                'line-height':'40px'
            }, 300);
            $a.data('size','small').stop().animate({
                height:'20px'
            }, 300);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size','big').stop().animate({
                height:'100px',
                'line-height':'40px'
            }, 300);
            $a.data('size','big').stop().animate({
                height:'40px'
            }, 300);


        }  
    }
});