jQuery动画img页边空白顶部

jQuery animate img margin-top

本文关键字：顶部 页边空白 img 动画 jQuery      更新时间：2023-09-26

我试图制作一列框的动画，也就是占位符.png向下，页边空白在顶部，但它会制作所有9个框的动画而不是一列中的3个。这是代码：http://jsfiddle.net/MgL3E/1

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

您应该首先布局列，例如

<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/

两个错误：

  • 点击span即可注册，但您的小提琴中没有span元素
  • id不能以数字开头

当将id="1"更改为id="t1"时，这个js对我来说运行良好。在测试中，它已在所有img标签上注册。。将其替换为任何应该导致动画旋转的内容。

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