Can someone help me figure out how to make two circles move differently with the same JavaScript function? I'm new to JavaScript and struggling to differentiate between classes in HTML to achieve this. My goal is to have each circle move randomly and independently from the other.
I want the two circles to have unique movement patterns even though they share the same function. Any suggestions on how to approach this would be greatly appreciated.
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/stylesheet.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<div class="wrapper" style="top:18%;left:15%">
<a href="childs_html/aa.html" class="circle aa">aa</a>
</div>
<div class="wrapper" style="top:58%;left:18%">
<a href="childs_html/bb.html" class="circle bb">bb</a>
</div>
<script src="javascript/circle_movement.js"></script>
</body>
body {
overflow: hidden;
margin: auto;
width: 640px;
padding: 50px;
}
.wrapper {
position:absolute;
height:200px; width:200px;
}
.circle {
position:relative;
height:100px; width:100px;
margin-top:50px;margin-left:50px;
border-radius:50%;
border-style:solid;
}
$(document).ready(function(){
animation();
}
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
function new_position() {
var newt = randomNumber(-50,50);
var newl = randomNumber(-50,50);
return [newt, newl]
}
function animation(){
var newpos = new_position();
var speed = 2000;
$('.circle').animate({ top: newpos[0], left: newpos[1] }, speed, function(){
animation();
});
};
Your assistance is highly appreciated!