Funktion für ein Objekt künftig für mehrere Instanzen

[Forumsgast]

Hallo,

unter folender URL:

https://jsfiddle.net/trusktr/CmAuZ/

habe ich einen Code gefunden wodurch hardcoded ein Button vor der Mouse flüchtet:

var object = $("#objectToRunAway"),
function runAway()
{
    var randX = Math.floor(Math.random() * (window.innerWidth - 100));
    var randY = Math.floor(Math.random() * (window.innerHeight - 100));
    object.stop().animate({"left": randX + "px", "top": randY + "px"});
}
$(document).ready(function() {    object.on('mouseenter', runAway);    });

Ich möchte nun unzähligen Buttons bzw. Objekten mit dieser Methode Beine machen und habe den Code wie folgt angepasst, damit ist die Funktion aber nun kaputt.
Was mach ich falsch? Jemand eine Idee?

var object = $("#objectToRunAway"),
function runAway(objectInstance)
{
    var randX = Math.floor(Math.random() * (window.innerWidth - 100));
    var randY = Math.floor(Math.random() * (window.innerHeight - 100));
    objectInstance.stop().animate({"left": randX + "px", "top": randY + "px"});
}
$(document).ready(function() {    object.on('mouseenter', runAway(object));    });

[Forumsgast]

also mir ist schon klar, was ich falsch mache, mit dem Aufrufparameter wird meine Methode nicht mehr als Objekt übergeben, sondern direkt ausgeführt...

Aber wie krieg ich den Parameter in der zweiten Methode korrekt übergeben?

[Forumsgast]

<div class="object" style="width: 40px; height:40px; position: absolute; top: 50px; left: 50px; background-color: green"></div>

<div class="object" style="width: 40px; height:40px; position: absolute; top: 200px; left: 80px; background-color: yellow"></div>
<script
              src="https://code.jquery.com/jquery-3.5.1.js"
              integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
              crossorigin="anonymous"></script>
<script>
function runAway(objectInstance)
{
    var randX = Math.floor(Math.random() * (window.innerWidth - 100));
    var randY = Math.floor(Math.random() * (window.innerHeight - 100));
    objectInstance.stop().animate({"left": randX + "px", "top": randY + "px"});
}

$(document).on('mouseenter', '.object', function() {
    runAway($(this));
});
</script>

[Forumsgast]

und wozu soll so etwas gut sein?

[Forumsgast]

Vielen Dank an Jonas3344 für die Hilfe, - cool das klappt ja prima.


Zorro001 - ich brauch das für eine Gestaltung, eigentlich sollen es bei mir keine Buttons sein, sondern lustige kleine Corona Viren, die umher schwirren die sich von der Mouse etwas ablenken lassen können.

Und ich hab mir gedacht, es gab da doch mal so einen Butten, auf den man drauf klicken soll, damit sich jemand auszieht , wo der Button aber immer vor der Mouse weg rannte
Naja, diese Button Funktion für EINEN Button hab ich wieder gefunden, wusste aber nicht, wie ich das nun für meine Zwecke verfielfältige.

Aber nun funktionierts ja Jetzt muss ich nur noch die kleinen Corona Viren mit dieser Klasse infizieren und voilla, schon laufen die Viren vom Mousecursor davon...
Fehlt eigentlich nur noch eine Klorolle als Mouse-Cursor, oder sowas?!

Na dann, vielen Dank für die Hülfe