如何在这些嵌套的div元素上设置大小动画？（jQuery）

我用它制作了一个旋转装置。现在我想让整个旋转齿轮div从

1%

到

110%

再到

100%

，然后返回到

1%

。或者基本上是

1px

到

90px

到

80px

（正常大小），然后回到

1px

现在，我在

#spinner

div中的元素上使用的jQuery正在为它设置动画，但它仍然处于关闭状态。动画应该像CSS过渡比例一样，从1%放大到110%。此时，我的动画偏离中心

有什么想法吗

jsFiddle:
新代码笔：

我需要为

#微调器
div中的每个元素设置动画吗



jQuery用于放大和缩小动画：

function firstAnimate() {
    $('#spinner').animate({width: "110px", height: "110px"}, secoundAnimate);
}

function secoundAnimate() {
    $('#spinner').animate({width: "80px", height: "80px"}, 'slow', thirdAnimate);
}

function thirdAnimate() {
    $('#spinner').animate({width: "1px", height: "1px"}, 'fast', fourthAnimate);
}

function fourthAnimate() {
    $('#spinner').hide;
}

firstAnimate();



我的旋转装置HTML：

<div id="spinner">
    <div id="logo">
        <img src="http://leongaban.com/_codepen/whoat/loader-logo.png"/>
    </div>
    <div id="gear" class="spin">
        <img src="http://leongaban.com/_codepen/whoat/loader-gear.png"/>
    </div>
</div>

我必须结合使用CSS scale和jQuery来获得我想要的效果

Scale可以轻松地从中心向上扩展，thx@Zeaklous


需要一个类设置向上动画，一个类设置向下动画：

.animateUp {
    -webkit-animation: animateUp .5s ease-in-out;
    animation: animateUp .5s ease-in-out;
}
.animateDown {
   -webkit-animation: animateDown .5s ease-in-out;
   animation: animateDown .5s ease-in-out;
}

@-webkit-keyframes animateUp { 
    0%  {
        -webkit-transform: scale(.1);
       transform: scale(.1);
    }
    70% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes animateDown { 
    0%  {
        -webkit-transform: scale(1);
        transform: scale(.1);
    }
    100% { 
        -webkit-transform: scale(.1);
        transform: scale(.1);
    }
}

jQuery中的动画，因此我可以控制它何时进行动画输入和输出：

$('#animate-up').unbind('click').bind('click', function() {
    $('#spinner').removeClass('animateDown');
    $('#spinner').addClass('animateUp');
    console.log('animate up');
});

$('#animate-down').unbind('click').bind('click', function() {
    $('#spinner').removeClass('animateUp');
    $('#spinner').addClass('animateDown');
    console.log('animate down');
});

$（“#微调器”）.children（）.animate（）试试这个我试过的小提琴它越来越近了。想一想，你就能做到。div的子对象不是通过单独选择或组合来设置动画。我会使用CSS的
transform:scale
来实现这一点，这将使它变得超级简单！越来越近：）
$('#animate-up').unbind('click').bind('click', function() {
    $('#spinner').removeClass('animateDown');
    $('#spinner').addClass('animateUp');
    console.log('animate up');
});

$('#animate-down').unbind('click').bind('click', function() {
    $('#spinner').removeClass('animateUp');
    $('#spinner').addClass('animateDown');
    console.log('animate down');
});