jQuery从相对位置到绝对位置的动画?可能的? [英] Jquery animate from relative to absolute position? Possible?

问题描述

我正在尝试在屏幕上为两个图像设置动画.理想情况下，我希望图像以浏览器窗口的中心位置开始(无论大小)，然后将其移至浏览器窗口的确切位置(例如，顶部100px，左侧100px).我的动画效果很好，但仅相对于起始位置.我不知道如何在不固定起点的情况下将其移动到特定位置(显然会打败对中的想法).

I am trying to animate a couple of images across a screen. Ideally I would like the images to start out centered in the browser window (whatever its size) and have them move over to a an exact position (say 100px from top, 100px from left) of the browser window. My animation works fine, but only relative to the starting location. I can't figure out how to get it to move to an specific position without making the starting point fixed (which obviously defeats the centering idea).

这是我目前正在使用的代码:

Here is the code I am working with at the moment:

$('img#one').delay(300).animate({left: '-=485', top: '-=448'},500);
$('img#two').delay(800).animate({left: '-=645', top: '-=399'},800);
$('img#dash').delay(800).animate({left:'-=1398'},800);

这是HTML:

<div id="logowrap"><img id="one" src="images/one.png"><img id="two" src="images/two.png"></div>
<img id="dash" src="images/dash.png">
</div>

这是CSS:

#one {
    margin-top: 500px;
    margin-left: 530px;
    position: relative;
    display: block;
    z-index: 6;
}

#dash {
    display: block;
    z-index: 8;
    margin-left: 1600px;
    margin-top: -505px;
    position: relative;

}


body {
    margin: 0;
    width: 100%;
}


#two {
    margin-left: 698px;
    position: relative;
    display: block;
    z-index: 14;
    margin-top: -53px;
}

任何帮助都受到赞赏！谢谢！

Any help highly appreciated! Thanks!

推荐答案

感谢Peol，我才弄清楚了，他的回答将我引向了正确的方向.FWIW，这是我的最终代码:

Thanks to Peol, I just figured it out, with his answers leading me in the right direction. FWIW, here is my final code:

$(document).ready(function(){   
var offsetg = $('img#one').offset();
offsetgmoveL = offsetg.left - 42;
offsetgmoveT = offsetg.top + 282;
var offsetM = $('img#two').offset();
offsetMmoveL = offsetM.left +115;
offsetMmoveT = offsetM.top + 232;
    $('img#one').delay(300).animate({left: '-=' + offsetgmoveL + '', top: '-=' + offsetgmoveT + ''},500);
    $('img#two').delay(800).animate({left: '-=' + offsetMmoveL + '', top: '-=' + offsetMmoveT + ''},300);

这篇关于jQuery从相对位置到绝对位置的动画?可能的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！