jquery : div의 크기를 중앙에서 변경하는 방법

Question

jQuery animate() 함수를 사용하여 div의 크기를 변경하면 항상 왼쪽 위 지점부터 시작됩니다. 구석에서 중앙으로 확대/축소하는 방법은 무엇입니까? 예를 들어 , 내 코드 :

<div id="div1"></div> 

<style> 


#div1{ 
position: absolute; 
width: 50px; 
height: 50px; 
background-color: red; 
opacity: 0.4; 
top: 40%; 
left: 40%; 
border-radius: 1000px; 
margin: auto; 
} 
</style> 

<script src="jquery.js"></script> 
<script src="jquery.easing.1.3.js"></script> 

<script> 
$(document).ready(function(){ 
$("#div1").mouseover(function(){ 
    $(this).animate(
    {width: 100, height: 100, opacity: 1}, 
    {duration: 500, 
    easing: "easeOutBounce"} 
    ); 
}); 
$("#div1").mouseout(function(){ 
    $(this).animate(
    {width: 50, height: 50, opacity: 0.4}, 
    {duration: 500, 
    easing: "easeOutBounce"} 
    ); 
}); 
}); 
</script> 

이 왼쪽 상단 지점에서 변경됩니다하지만 난 그게 센터에서 쳐다보고 싶습니다. 감사합니다.

Answer 1

@Schroedingers Cat의 제안을 사용하는 example입니다. 상단 및 왼쪽 위치를 백분율이 아닌 픽셀 값으로 변경했습니다.

자바 스크립트 :

$("#div1").mouseover(function() { 
    $(this).animate({ 
     width: 100, 
     height: 100, 
     top: 75, 
     left: 75, 
     opacity: 1 
    }, { 
     duration: 500, 
     easing: "easeOutBounce" 
    }); 
}); 
$("#div1").mouseout(function() { 
    $(this).animate({ 
     width: 50, 
     height: 50, 
     top: 100, 
     left: 100, 
     opacity: 0.4 
    }, { 
     duration: 500, 
     easing: "easeOutBounce" 
    }); 
}); 

CSS :

#div1{ 
    position: absolute; 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    opacity: 0.4; 
    top: 100px; 
    left: 100px; 
    border-radius: 1000px; 
    margin: auto; 
} 

Answer 2

당신이 당신의 CSS의 비율, 당신은 최고를 얻기 위해 jQuery를 position() 기능을 사용할 수 있습니다로 유지하려면 및하면에 따라, 좌표를 시작 왼쪽 width() 및 height()으로 설정하고 애니메이션의 기준 값으로 사용하십시오.

mouseOut 기능에서 사용할 수있는 CSS에서 초기 설정을 가져올 수도 있습니다.

jsfiddle example