Move one object to the position of another

Report · Apr 20, 2019

I have two object

These "object" are setting with style property like:

<style>

#MyObject2 {

top: 700; left: 400px; width: 70px; height: 70px;

position: absolute;

background-image: url(http://xxx1.png); background-size: cover;">

}

</style>

And so on.

I need a function that permit with a mouseclick to move the object2 to the place of the object1.

How it is possible to do?

Thanks and Happy Easter to all!!

Report · Apr 20, 2019

I think this will do what you asked for.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Animate</title>
<style>
.container {
margin: 0 auto;
width: 80%;
position: relative;
}
.block1 {
position: absolute;
background-color: #abc;
left: 10px;
width: 150px;
height: 150px;
z-index: 100;
}
.block2 {
position: absolute;
background-color: #ff0000;
left: 165px;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div class="container">
<button id="right">CLICK ME &raquo;</button>
<div class="block1"></div>
<div class="block2"></div>
</div>
<!--jQuery 3 library--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script>
$( "#right" ).click(function() {
  $( ".block1" ).animate({ "left": "+165px" }, "slow" );
});
</script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 20, 2019

After re-reading your post, you actually want object 2 to move, not object 1.

OK. My revised code.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Animate</title>
<style>
.container {
margin: 0 auto;
width: 80%;
position: relative;
}
.block1 {
position: absolute;
background-color: #abc;
left: 10px;
width: 150px;
height: 150px;
}
.block2 {
position: absolute;
background-color: #ff0000;
left: 165px;
width: 150px;
height: 150px;
z-index: 100;
}
</style>
</head>
<body>
<div class="container">
<button id="left"> &laquo; CLICK ME </button>
<div class="block1">
</div>
<div class="block2">
</div>
</div>
<!--jQuery 3 library--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script>
$( "#left" ).click(function() {
  $( ".block2" ).animate({ "left": "10px" }, "slow" );
});
</script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 21, 2019

Thank you Nancy for you gentle help,

I''m sorry, It is my fault to tryed before to explain in a short way my purpose, but what I really ned is a var for "+165", because "object1" is in movement, so I also need a variable for vertical parameter.

In wich way can I complete your script or do what i need?

Thank you and I beg pardon for my incomplete question.

Report · Apr 21, 2019

(The movement is from up to down)

Report · Apr 21, 2019

In your last script I need a variable at this point: "10px".

$( ".block2" ).animate({ "left": "10px" }, "slow" );

Report · Apr 21, 2019

Show us your code.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 21, 2019

https://forums.adobe.com/people/gian+carlog61267382 wrote
In your last script I need a variable at this point: "10px".
$( ".block2" ).animate({ "left": "10px" }, "slow" );

Are we getting any closer?

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

var MyObject1 = $("#MyObject1").position();

$("#MyObject2").animate({top: MyObject1.top, left: MyObject1.left});

});

</script>

<style>

#MyObject1 {

top: 100px;

left: 200px;

width: 70px;

height: 70px;

position: absolute;

background-color: red;

}

#MyObject2 {

top: 700px;

left: 400px;

width: 70px;

height: 70px;

position: absolute;

background-color: yellow;

z-index: 100;

}

</style>

</head>

<body>

</body>

</html>

Report · Apr 21, 2019

Thank you Osgood,

this work perfectly.

Thank you very much!!

Thank also to Nancy.

Only one thing: is there a way to set the time of animation? Not "slow" or "fast" but in millisecond, if yes wich is the syntax?

Thank you again.

Report · Apr 21, 2019

Yes, you may use a duration number instead of a string.

Refer to the jQuery API documentation.

http://api.jquery.com/animate/

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 21, 2019

Thank you Nancy!!

Adobe Community

Move one object to the position of another

1 Correct answer