What my blue fish should do: Move around to random positions on the screen and when you touch it with the mouse, it should flee to a random location fast, then continue swimming.
What my blue fish does: After fleeing, it warps to a random location.
How can I fix the warping, so that the fish continues swimming from its current position after fleeing?
/*globals $:false, window:false*/
$("#blueFishId").animate({}, function() {
blueFish(this)
});
function blueFish(IdRef) {
var x = Math.floor(Math.random() * ($(window).width() - $(IdRef).width()))
var y = Math.floor(Math.random() * ($(window).height() - $(IdRef).height()))
$(IdRef).delay(500).animate({
top: y,
left: x
}, 5000, function() {
blueFish(IdRef);
});
}
$("#blueFishId").on("mouseenter", function() {
var x = Math.floor(Math.random() * ($(window).width() - $("#blueFishId").width()))
var y = Math.floor(Math.random() * ($(window).height() - $("#blueFishId").height()))
$("#blueFishId").animate({
top: y,
left: x
}, 1000);
});img {
position: relative;
}
#blueFishId {
height: auto;
width: auto;
position: relative;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><img class="blueFish" id="blueFishId" src="images/fish2.png">