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があります。私はパーセントではなく、ピクセルの値に上と左の位置を変更しました。

はJavaScript：

$("#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