fonction de rappel JQuery ne fonctionne pas

Question

Je suis en train d'utiliser la fonction de rappel du type suivant:

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

pour placer des images l'une sur l'autre.

Mon HTML contient cinq images seulement.

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

Alertes à la page: 50px ... 160px ... 270px ... 380px ... 490px Mais images encore coincé dans un endroit. Pouvez-vous trouver une erreur ici?

Answer 1

Ce que vous faites est de définir une propriété HTML, pas une propriété CSS. Votre image devient <img top=50px></img>, ce qui ne veut rien dire pour le navigateur. Utilisez la fonction jquery .css() pour manipuler css:

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

Par exemple. http://jsfiddle.net/M6SZE/