jQuery lineheight行为很奇怪

Question

I'm running this script, but when I scroll it runs all the functions at the same time, EXCEPT for the lineheight part. It runs the lineheight part after all the others. And it should run them all at the same time!

Any suggestions?

Thank you!

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

$(window).scroll(function () {
    if ($(document).scrollTop() > 1) {
        if ($('Header').data('size') == 'big') {
            $('Header').data('size', 'small');
            $('Header').stop().animate({
                height: '60px', opacity: '0.97'
            }, 300);
            $('Header a').stop().animate({
                height: '60px'
            }, 300);
            $('#headerFiller').stop().animate({
                height: '60px'
            }, 300);
            $('Header ul li').stop().animate({
                lineHeight: '60px'
            }, 300);

            $('#logo').stop().animate({
                marginTop: '-1px',
                height: '50px'
            }, 300);
        }
    }
    else {
        if ($('Header').data('size') == 'small') {
            $('Header').data('size', 'big');
            $('Header').stop().animate({
                height: '100px'
            }, 300);
            $('Header a').stop().animate({
                height: '100px'
            }, 300);
            $('#headerFiller').stop().animate({
                height: '100px'
            }, 300);
            $('#logo').stop().animate({
                marginTop: '0px',
                height: '85px'
            }, 300);
            $('Header ul li').stop().animate({
                lineHeight: '100px'
            }, 300);
        }
    }
});

Answer 1

I believe what you need is queue: false so all your effects run simultaneously (don't get place in a queue ). You can see more info in the documentation .

 $('Header ul li').stop().animate({
    lineHeight: '100px'
 }, { duration: 300, queue: false});