JQuery animates from a relative absolute position? Possible?

I'm trying to animate a couple of images across the screen. Ideally, I would like the images to start from the center in the browser window (regardless of its size) and go to the exact position (say, 100 pixels on the top, 100 pixels on the left) in the browser window. My animation works fine, but only relative to the original location. I can’t understand how to make him move to a certain position without fixing the starting point (which, obviously, defeats the central idea).

Here is the code I'm currently working with:

$('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);

Here is the 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>

And here is the 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 is much appreciated! Thank!

+3
source share
2 answers

, . FWIW, :

$(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);
+1

.offset() - http://api.jquery.com/offset/ - , 0,0 , , , 100 100 , 100 100 0,0 (, , , ).

+1

Source: https://habr.com/ru/post/1757414/


All Articles