Javascript JQuery回调函数不使用'；行不通

我正在尝试使用以下类型的回调函数：

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

将一个图像置于另一个图像之上

我的HTML仅包含五个图像

CSS:

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

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

JQuery:

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

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

页面中的警报：50px…160px…270px…380px…490px 但图像仍然停留在一个地方。

---

您能在这里找到错误吗？

您所做的是设置HTML属性，而不是CSS属性。您的图像将变成

，这对浏览器来说毫无意义。使用jquery

.css（）

函数操作css：

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

例如