javascript - 使用outerHeight();测量相同的类(class)名称，但高度不同

动画的距离取决于item0高度。但是，当我使用一个二级类来更改div的高度时，jQuery不会将新的高度付诸实践。
是否可以考虑新类名给出的新高度？
http://jsfiddle.net/tmyie/28N7M/1/
查询：

    var height = $('.item0').outerHeight();

    $('p').click(function(){
        $('.item0').animate({top:height}, 300);

    });

HTML格式：

    <p>click here</p>

    <div class="item0"></div>
    <div class="item0"></div>
    <div class="item0"></div>
    <div class="item0 half"></div>

CSS

.item0 {
    background-color: red;
    height: 50px;
    width: 25px;
    float: left;
    margin-left: 5px;
    position: relative;
}

.half {
    height: 10px;
    background-color: blue;
}

最佳答案

$('p').click(function(){
     var $this;
     $('.item0').each(function() {
        $this = $(this);
        $this.animate({
            top: $this.outerHeight()
        }, 300);
     });
});

DEMO