jQuery ~ Cómo animar el ancho y alto de la caja desde el centro del centro

Question

El tamaño de la caja es el ancho: 200px, altura: 140px. Cuando se utiliza la animación para cambiar el tamaño de la casilla, se transformará desde la parte superior izquierda. Cómo cambiarlo transformar desde el centro del centro.

HTML

<div class="box"></div> 

CSS

width:200px; 
height:140px; 
background-color:#0066CC; 

jQuery

$('.box').mouseover(function() { 
    $(this).animate({ 
    width: "210px", 
    height: "150px" 
    }, 200); 
}); 
$('.box').mouseout(function() { 
    $(this).animate({ 
    width: "200px", 
    height: "140px" 
    }, 200); 
}); 

Answer 1

no creo que esto es posible. Como alternativa, puede animar el relleno de la caja ...

<style> 
    .box { width:200px; height:140px; } 
</style> 

<div class="box"><div></div></div> ​ 

<script> 
    $('.box').mouseover(function() { 
    $(this).animate({ 
     'padding' : 5 
    }, 200); 
    }); 
    $('.box').mouseout(function() { 
    $(this).animate({ 
     'padding' : 0 
    }, 200); 
    }); 
</script> 

Ejemplo de trabajo:

http://jsfiddle.net/WryxR/1/

Answer 2

bien, así que aquí estoy con solución .. Check This fiddle Example

CSS:

.box{ 
    width: 200px; 
    height: 140px; 
    background-color:#0066CC; 
    position : absolute; 
    left: 100px; 
    top: 100px; 
} 

JQUERY:

$('.box').hover(function(){ 
    $(this).animate({ 
    'width': '220px', 
    'height': '160px', 
    'left': '90px', 
    'top': '90px' 
    },200); 
    },function(){ 
    $(this).animate({ 
    'width': '200px', 
    'height': '140px', 
    'left': '100px', 
    'top': '100px' 
    },200); 
}); 

puede cambiar el valor que desee.

Answer 3

Aquí es una opción utilizando sólo CSS (nota: CSS3): http://jsfiddle.net/g67cc/6/

.box { 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    -ms-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 

    width: 200px; 
    height: 140px; 
    background-color:#0066CC; 
    position : absolute; 
    left: 100px; 
    top: 100px; 
} 

.box:hover { 
    width: 220px; 
    height: 160px; 
    left: 90px; 
    top: 90px; 
}