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到左边，200到底部，但是会发生什么呢？它会被移到页面cordenade 200px left和200px bottom，

.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/

希望这有帮助。

鲍勃

从其位置而不是页面coordenades动画图像位置

2 个答案: