I have code for googly eyes that is too long. Basically I have variables for each element pupils (one for right -other for left), eyesockets (left, right). I wish I could compress my code so I can call a function animateEye (eye).  function animateEye(eye) {          console.log(eye);          var pupille = eye.find(div);For now this is what I have and I have no idea how to continue.This is the actual code:var pupilleLinks = $('#pupilleLinks');var pupilleRechts = $('#pupilleRechts');//   var abstandH =  pupille.offset().left- e.pageX + pupille.height()/2;$(document).on('mousemove', function(e){    var abstandV1 = pupilleLinks.offset().top- e.pageY +pupilleLinks.height()/2;    var pupilleL1 = pupilleLinks.position().top - abstandV1 ; // 10 = Breite Pupille / 2    var augeLinks = $(#augeLinks)    var distanceX=augeLinks.width()-pupilleLinks.width();    var distanceY=augeLinks.height()-pupilleLinks.height();    if(pupilleL1 > distanceY) {       (pupilleL1 = distanceY);               }    if(pupilleL1 < 0) {       (pupilleL1 = 0);               }    var abstandH1 = pupilleLinks.offset().left- e.pageX + pupilleLinks.width()/2;    var pupilleL2 = pupilleLinks.position().left - abstandH1 ;    if (pupilleL2 < 0) {       (pupilleL2 = 0);               }    if(pupilleL2 > distanceX) {      (pupilleL2 =distanceX);               }    pupilleLinks.css({        left: pupilleL2+px,        top: pupilleL1+px               });    var abstandH2 = pupilleRechts.offset().left- e.pageX + pupilleRechts.width()/2;    var pupilleR1 = pupilleRechts.position().left - abstandH2;    var augeRechts = $(#augeRechts)    var distanceX2=augeRechts.width()-pupilleRechts.width();    var distanceY2=augeRechts.height()-pupilleRechts.height();    if(pupilleR1 < 0) {      (pupilleR1 = 0);               }    if(pupilleR1 > distanceX2) {      (pupilleR1 = distanceX2);               }    var abstandV2 = pupilleRechts.offset().top- e.pageY + pupilleRechts.width()/2;    var pupilleR2 = pupilleRechts.position().top - abstandV2;    if(pupilleR2 < 0) {      (pupilleR2 = 0);               }    if(pupilleR2 > distanceY2) {      (pupilleR2 =distanceY2);               }    pupilleRechts.css({            left: pupilleR1+px,            top: pupilleR2+px               });    });.auge {  position: relative;  display: inline-block;  width: 150px;  height: 150px;  border: 10px solid black;}.pupille {  position: absolute;  top: 50%;  left: 50%;  width: 30px;  height: 30px;  background-color: blue;  border-radius: 15px;}<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js></script><div id=augeLinks class=auge>  <div id=pupilleLinks class=pupille></div></div><div id=augeRechts class=auge>  <div id=pupilleRechts class=pupille></div></div>
Follow-the-cursor eye animation
javascript;jquery;animation
Programming in German results in an awkward mix of English and German identifiers, with conflicting capitalization conventions.  I suggest sticking to English, though I will make an attempt to accommodate your language preference here.The code is duplicated not only for each eye, but also for each axis, resulting in four copies.  The copy-and-pasted code is hard to follow because you have pasted them in an order that is not quite parallel:var abstandV1 = ;var pupilleL1 = ;var augeLinks = $(#augeLinks)var distanceX=;var distanceY=;if var abstandH1 = ;var pupilleL2 = ;if A more logical order would be:var augeLinks = $(#augeLinks);var abstandLY = ;var pupilleLY = ;var distanceLY = ;if var abstandLX = ;var pupilleLX = ;var distanceLX = ;if Instead of using if-statements the enforce the lower and upper bounds, I suggest using Math.min() and Math.max().Using the same code for the left and right eyes is easy: just make smarter use of jQuery selectors:$('.pupille').each(function() {    var $pupille = $(this);    var $auge = $(this).closest('.auge');    });Writing one version of the code for both the horizontal and vertical axes is tricker.  I suggest defining a horizontal and a vertikal object to extract the relevant attributes.var horizontal = {    groesse:  function($el) { return $el.width(); },    position: function($el) { return $el.position().left; },    offset:   function($el) { return $el.offset().left; },    cursor:   function(event) { return event.pageX; },};var vertikal = {    groesse:  function($el) { return $el.height(); },    position: function($el) { return $el.position().top; },    offset:   function($el) { return $el.offset().top; },    cursor:   function(event) { return event.pageY; },};function koordinate($pupille, $auge, cursor, achse) {    var augeGroesse = achse.groesse($auge) - achse.groesse($pupille);    var abstand = achse.cursor(cursor) +                  achse.position($pupille) -                  achse.offset($pupille) -                  achse.groesse($pupille) / 2;    return Math.max(0, Math.min(augeGroesse, abstand));}$(document).on('mousemove', function(event) {    $('.pupille').each(function() {        var $pupille = $(this);        var $auge = $(this).closest('.auge');        $pupille.css({            left: koordinate($pupille, $auge, event, horizontal) + 'px',            top:  koordinate($pupille, $auge, event, vertikal) + 'px',        });    });});.auge {  position: relative;  display: inline-block;  width: 150px;  height: 150px;  border: 10px solid black;}.pupille {  position: absolute;  top: 50%;  left: 50%;  width: 30px;  height: 30px;  background-color: blue;  border-radius: 15px;}<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js></script><div id=augeLinks class=auge>  <div id=pupilleLinks class=pupille></div></div><div id=augeRechts class=auge>  <div id=pupilleRechts class=pupille></div></div>