jQuery动画img边距顶部

Question

我正在尝试使用margin-top向下对1列又名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/

Answer 2

两个错误：

• 注册跨度点击，但是您的小提琴中没有跨度元素
• ID不能以数字开头

当将id="1"更改为id="t1"时，此js对我来说运行良好。 Testwise将其注册在所有img标签上。用任何会导致动画旋转的东西替换它。

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