2 
$('#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 我想将它向左移动 200 像素，向底部移动 200 像素，但会发生什么情况是它被移动到左 200 像素和底部 200 像素的页面上，

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

相反，但该位置没有动画化，

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

4

2 回答 2

5

您可以使用

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

jQueryoffset函数返回浏览器窗口左上角的偏移量。还有另一个函数调用position，它确定第一个具有position relativeor的父元素的偏移量absolute。

http://jsfiddle.net/UDb7V/

于 2011-10-05T14:19:20.667 回答
0

这是一个简单的例子。我试图用动画的东西来分解它。您可以添加更多的复杂性。

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/

希望这可以帮助。

鲍勃

于 2011-10-05T14:38:35.397 回答