анимация положения изображения с его позиции, а не коренады страницы

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

            }); 

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

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

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

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

Answer 1

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

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

затем вы добавляете 200px к осям 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/

Answer 2

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

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/

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

Боб