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';
    }
);

例如。 http://jsfiddle.net/M6SZE/