Блог

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

            }); 
  

В основном я хочу переместить его на 200 пикселей влево и 200 вниз,
но что происходит, так это то, что он перемещается на страницу с разрешением 200 пикселей слева и 200 пикселей снизу,

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

вместо этого, но тогда позиция не анимируется,

чего мне не хватает? должен ли я делать это со смещением?

вы можете использовать

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

затем вы добавляете 200 пикселей к осям x и y

Или вы можете сначала определить смещение:

 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() {
...
  

Функция jQuery offset возвращает смещение от верхнего и левого угла окна браузера. Вызывается другая функция position , которая определяет смещение к первому родительскому элементу, имеющему position relative или absolute .

http://jsfiddle.net/UDb7V/

Вот простой пример. Я попытался разбить его только с помощью анимации. Вы можете добавить обратно больше сложности.

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

});
  

Вот jsFiddle: http://jsfiddle.net/cfrN2/1 /

Надеюсь, это поможет.

Боб