jQuery的动画行高-可能吗? [英] jquery animate line height - possible?

问题描述

有关jquery中的animate属性的快速问题，是否可以设置动画

quick question about the the animate property in jquery, Is it possible to animate

我不知道怎么办? 这是我的html

I cant figure out how? here is my 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>

和javascript:

and javascript:

$(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);


        }  
    }
});

还有一种方法可以使导航和a标签的动画保持同步.

Also is there a way to get the animation for the nav and the a tags to be in sync.

谢谢

对不起，如果这是一个非常基本的问题-jQuery的新手

ps sorry if its a really basic question - im new to jquery

http://jsfiddle.net/jamesmstone/c7nLB/32/

推荐答案

在这里，这是动画功能中的行高，应该是行高"

Here you go, it was your line-height in animate function it should have been 'line-height'

$(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的动画行高-可能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！