jQuery ~ Cách kích hoạt hộp chiều rộng và chiều cao từ trung tâm trung tâm

Question

Kích thước hộp là chiều rộng: 200px, chiều cao: 140px. Khi sử dụng animate để thay đổi kích thước hộp, nó sẽ biến đổi từ trên cùng bên trái. Cách thay đổi biến đổi từ trung tâm trung tâm.

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

Tôi không nghĩ rằng đó là có thể. Ngoài ra, bạn có thể animate đệm của hộp ...

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

làm việc Ví dụ:

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

Answer 2

cũng vì vậy đây tôi với giải pháp .. 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); 
}); 

bạn có thể thay đổi giá trị như bạn muốn.

Answer 3

Dưới đây là một tùy chọn chỉ sử dụng CSS (lưu ý: 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; 
}