Question

$('#container img')
                .clone()
                .appendTo('#container')
                .css({'position' : 'absolute','z-index':9999,marginLeft:-100})
                .animate({opacity: 0.1, left: 200,top:200,height:420}, 1000, function() {
                    $(this).remove();
                     actualizar(iGal);

            }); 

Basicalli i want to move it 200px to left and 200 to bottom,
but what happens is it gets moved to page cordenade 200px left and 200px bottom,

.css({'position','relative'});

instead, but then the position is not animed,

what am i missing? do i have to do it with offset?

Answer 1

you can use

...
.animate({opacity: 0.1, left: "+=200",top:"+=200",height:420}, 1000, function() {
...

then you add 200px to the x and y axis

Or you can detect the offset first:

var offset = {
    x: $('#container img').offset().left,
    y: $('#container img').offset().top
};

...
.animate({opacity: 0.1, left: offset.x+200,top: offset.y+200,height:420}, 1000, function() {
...

The jQuery offset function returns the offset from the browser windows top and left corner. There are another function called position which determinate the offset to the first parent element having position relative or absolute.

http://jsfiddle.net/UDb7V/