How to add mouse event 'click' to div element, while it's moving

How to add mouse event 'click' to div element, while it's moving

Hello friends, I have a problem with my jQuery code. I need four div elements to move on page load, and keep moving while user is on that page. I managed that, but I have a problem to make one of elements to change height and width on click WHILE MOVING. I need solution using jQuery only. Here is my code:

HTML CODE:
<html>
<head>
<title>jQuery Animation</title>
<script src="script.js"></script>
</head>

<body>

<div id="id_1" style="background:purple; width:100px; height:100px; border-radius:50%; position:relative;"></div>

<div id="id_2" style="background:blue; width:100px; height:100px; position:relative;"></div>
<div id="id_3" style="background:yellow; width:300px; height:100px;position:relative;"></div>
<div id="id_4" style="background:green; width:300px; height:100px; border-radius:50%;position:relative; float:right;"></div>
</body>


</html>

jQuery:

$(document).ready(function(){
function purpleElement(){
$("#id_1").animate({left:700, top: 500}, 10000).animate({left:0},10000).animate({top:0},10000)


$("#id_2").animate({left:800}, 10000).animate({top:400},10000).animate({left:0},10000).animate({top:0},10000);

$("#id_3").animate({top: 500}, 10000).animate({left:400},10000).animate({left:0, top:0},10000);

$("#id_4").animate({top: 500, right: 500}, 10000).animate({top:700},2000).animate({right:800},2000).animate({top:0, right:0},10000);

}
setInterval(purpleElement,40000);
});