animate image position from its position instead of page's cordenades

$('#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?

---

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/

---

Here is a simple example. I tried to break it down with just the animation stuff. You can add back in more complexity.

HTML

<div id='#container'>
    <p>Text above the image</p>
    <img id='img' src='http://www.google.com/intl/en_com/images/srpr/logo3w.png' />
    <p>Text below the image</p>
    <button id='start'>Animate</button>
</div>

CSS

#container { position: relative; }

#img { position: relative; }

JAVASCRIPT

$('#start').click(function(){

    $('#img').animate({left:'100px', top:'100px'}, 1000, function(){
       alert('here');
    }); 

});

Here is a jsFiddle: http://jsfiddle.net/cfrN2/1/

Hope this helps.

Bob