jquery - 从图像位置而不是页面坐标对图像位置进行动画处理

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 我想将其向左移动 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/