javascript - jQuery 动画 img margin-top

Question

我正在尝试使用 margin-top 向下设置 1 列框 aka placeholder.png 的动画，但它向下设置所有 9 个框的动画，而不是一列中的 3 个。这是代码:http://jsfiddle.net/MgL3E/1

$(document).ready(function() 
{
    $("span").click(function() 
    {
        $("#1").animate(
        {
            "margin-top": "300px"
        }, 1000);
    });
});

Answer 1

你应该先布局列，例如

<div>
    <div class="column">
        <img class="hpbox" src="img/placeholder.png"/>
        <img class="hpbox" src="img/placeholder.png"/>
        <img class="hpbox" src="img/placeholder.png"/>
    </div>
    <div class="column">
        <img class="hpbox" src="img/placeholder.png"/>
        <img class="hpbox" src="img/placeholder.png"/>
        <img class="hpbox" src="img/placeholder.png"/>
    </div>    
    <div class="column">
        <img class="hpbox" src="img/placeholder.png"/>
        <img class="hpbox" src="img/placeholder.png"/>
        <img class="hpbox" src="img/placeholder.png"/>
    </div>
</div>

和 CSS

.column {
    float:left;
    width: 98px;
}

http://jsfiddle.net/MgL3E/2/