JQuery Animation Ankerpunkt

Question

Im Versuch, ein Bild mit JQuery zu vergrößern, funktioniert es großartig (die Animation selbst), aber der Ankerpunkt befindet sich oben links. Wie kann ich den Ankerpunkt zentrieren? Ich habe bereits versucht, left:50%; transform: translateX(-50%); zu verwenden. Code unten:

HTML:

<div id="main-links"> 
     <a style="cursor:pointer"><img id="img-1" style="margin-left: 0;" src="img/icons/forums.png" /></a> 
     <a style="cursor:pointer"><img id="img-2" src="img/icons/servers.png" /></a> 
     <a style="cursor:pointer"><img id="img-3" src="img/icons/staff.png" /></a> 
     <a style="cursor:pointer"><img id="img-4" src="img/icons/donate.png" /></a> 
    </div> 

CSS:

#main-links { 
    position: absolute; 
    width: 873px; 
    height: 205px; 
    left: 50%; 
    transform: translateX(-50%); 
    margin-top: -90px; 
} 

#main-links img { 
    width: 0; 
    height: 0x; 
    margin-left: 20px; 
} 

JavaScript/JQuery:

$(document).ready(function() { 
    $('#img-1').delay(700).animate({ height: 200, width: 200 }, 500) 
    $('#img-2').delay(1200).animate({ height: 200, width: 200 }, 500) 
    $('#img-3').delay(1700).animate({ height: 200, width: 200 }, 500) 
    $('#img-4').delay(2200).animate({ height: 200, width: 200 }, 500) 
}) 

Answer 1

Wenn Sie die RWD ...

Beispiel: How to scroll to anchor point in responsive website?