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

两个错误：

注册跨度点击，但你的小提琴中没有span元素
ids不能以数字开头

将id="1"更改为id="t1"时，此js对我来说运行正常。 Testwise在所有img标签上注册。用任何应该导致动画旋转的内容替换它。

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

jQuery动画img margin-top

2 个答案: