Dynamisch ändern Elemente Offset basierend auf seiner eigenen Größe und aktuellen Offset

Question

Ich habe ein Element in einem DIV. Wie unten ...

<div id="parent"> 
    <div id="child"></div> 
</div> 

Normalerweise das Kind in der Mitte der Eltern zu zentrieren, während das Kind Größe ändert (Zoom), würde ich nur tun ...

$('#child').resizable({ 
     resize:function(){ 
      // this extends the left/top offset while width increases 
      $('#child').css({ 
       left:$('#parent').width()/2 - $('#child').width()/2, 
       top:$('#parent').height()/2 - $('#child').height()/2 
      }) 
     } 
    }); 

Das obige Beispiel Werke vollkommen in Ordnung, aber wenn ich das Kind in der Größe verändere, beginnt es immer an der gleichen Stelle und nicht am Offset des Kindes.

Aber jetzt muss ich den linken und oberen Versatz des Kindes genau wie im obigen Beispiel anpassen, aber dieses Mal basiert nicht auf Berechnungen der Elterngröße, sondern eher der genaue Versatz des Kindes und seine Größe.

Answer 1

Darf ich vorschlagen, dass Sie transform und transform-origin verwenden.

transform Verwenden Sie die Elemente eigenen Eigenschaften, auf die es angewendet wird, nicht die Eltern.

CSS Hover

#parent { 
 
    height: 200px; 
 
    background: lightgray; 
 
} 
 
#child { 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 100px; 
 
    padding: 30px; 
 
    background: red; 
 
    text-align: center; 
 
    transition: transform 0.5s; 
 
    transform: translate(-50%,-50%); 
 
    transform-origin: center top;  /* which origin to scale from */ 
 
} 
 
#child:hover { 
 
    transform: translate(-50%,-50%) scale(1.5); 
 
}

<div id="parent"> 
 
    <div id="child">Hover me</div> 
 
</div>

jQuery Hover

$(document).ready(function() { 
 
    $("#child").hover(function() { 
 
    $(this).css("transform", "translate(-50%,-50%) scale(1.5)"); 
 
    }, function() { 
 
    $(this).css("transform", "translate(-50%,-50%)"); 
 
    }); 
 
});

#parent { 
 
    height: 200px; 
 
    background: lightgray; 
 
} 
 

 
#child { 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 100px; 
 
    padding: 30px; 
 
    background: red; 
 
    text-align: center; 
 
    transition: transform 0.5s; 
 
    transform: translate(-50%, -50%); 
 
    transform-origin: center top;   /* which origin to scale from */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="parent"> 
 
    <div id="child">Hover me</div> 
 
</div>