jQuery ~ Come animare la larghezza e l'altezza della casella dal centro centro

Question

La dimensione della scatola è larghezza: 200px, altezza: 140px. Quando si usa l'animazione per cambiare la dimensione della scatola, si trasformerà da sinistra in alto. Come cambiarlo trasformare dal 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

Non credo che sia possibile. In alternativa, è possibile animare l'imbottitura della scatola ...

<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> 

Esempio di lavoro:

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

Answer 2

ben ecco io sono con la soluzione .. 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); 
}); 

è possibile modificare il valore di come si desidera.

Answer 3

Ecco un'opzione utilizzando solo 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; 
}