从图像位置而不是页面的绳索开始对图像位置进行动画处理

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

            }); 

基本上我想将其向左移动 200px，向底部移动 200px， 但发生的情况是它被移动到页面左侧 200 像素和底部 200 像素

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

，但是该位置没有动画化，

我错过了什么？我必须用偏移来做吗？

Answer 1

您可以使用

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

然后向 x 和 y 轴添加 200px

或者您可以先检测偏移量：

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/

希望这个有帮助。

鲍勃