向下滚动时如何对角缩小框大小

Question

$(function(){
var navIsBig = true;
var $nav = $('#header_nav');

$(document).scroll( function() {
    var value = $(this).scrollTop();

    if ( value > 50 && navIsBig ){
        $nav.animate({height:45},"medium");
        $('.box').animate({height:36},"medium");
        $('.box').animate({width:78},"medium");
        navIsBig = false;

    }
    else if (value <= 50 && !navIsBig ) {
       $nav.animate({height:80},"medium");
         $('.box').animate({height:53},"medium");
        $('.box').animate({width:104},"medium"); 
        navIsBig = true;
    }
});
});

此处框会减小其大小，首先是高度，然后是宽度。但是我希望对角地缩小它的尺寸......

http://jsfiddle.net/9fact/466/

Answer 1

您可以为两个属性设置动画：

DEMO jsFiddle

$('.box').animate({height:36, width:78});