I successfully made the blue and red divs move diagonally and switch positions. Now I am looking to achieve the same effect with the green and pink divs using a similar function.
I am unsure about setting the position of both divs to 0 and 350 for those particular elements.
I want the green div to move towards the location of the pink div
function click_move() {
myMove();
myMove2();
myMove3();
myMove4();
}
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
function myMove2() {
var elem = document.getElementById("animate2");
var pos = 350;
var id = setInterval(frame2, 5);
function frame2() {
if (pos == 0) {
clearInterval(id);
} else {
pos--;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}button{
position:fixed;
left: 500px;
top: 100px;}
#container {
width: 400px;
height: 400px;
position: fixed;
background: yellow;
top:0px;
left:0px;
}
#animate {
width: 50px;
height: 50px;
position: fixed;
background-color: red;
top:0px;
left:0px;
}
#animate2 {
width: 50px;
height: 50px;
position: fixed;
background-color: blue;
top:350px;
left:350px;
}
#animate3 {
width: 50px;
height: 50px;
position: fixed;
background-color: green;
top: 0px;
left:350px;
}
#animate4 {
width: 50px;
height: 50px;
position: fixed;
background-color: pink;
top: 350px;
left:0px;
}<html>
<body>
<p>
<button onclick="click_move()">Click Me</button>
</p>
<div id ="container">
<div id ="animate"></div>
<div id ="animate2"></div>
<div id ="animate3"></div>
<div id ="animate4"></div>
</div>
</body>
</html>Moving forward, I want the pink div to take the place where the green div is currently positioned.