JQuery回调函数不起作用

Question

我试图使用以下类型的回调函数：

$('elem').attr(
'attr',
function(i, val){
    return i*10 + 'px';
   }
);

将图像放在另一个上面。

我的HTML仅包含五张图片。

CSS：

img {
position: absolute;
width: 100px;
height: auto;
}

JQuery的：

$('img').attr(
'top',
function(i, val){
    alert(50 + i*110 + 'px');
    return 50 + i*(110) + 'px';
  }
);

页面提醒：50px ... 160px ... 270px ... 380px ... 490px 但是图像仍然停留在一个地方。 你能在这里找到错误吗？

Answer 1

您正在做的是设置HTML属性，而不是CSS属性。您的图像变为<img top=50px></img>，这对浏览器来说意味着什么。使用jquery .css()函数来操作css：

$('img').css(
    'top',
    function(i, val){
        return 50 + i*(110) + 'px';
    }
);

EG。 http://jsfiddle.net/M6SZE/