动画的div和中心扩大 [英] animate a div and expand from center
问题描述
我有一个简单的code，它扩展了一个div水平和垂直方向的中心，
但它只是扩展到左侧或底部，我希望它扩展到两侧（左= 50像素，右= 50像素）或（TOP = 50像素，底部= 50像素）的中心，总等于100像素。
这里的code：
I have a simple code that expands a div horizontal and vertically from center, but it only expands to the left or to the bottom, I want it expands to both side(left=50px, right=50px) or (top=50px, bottom=50px) from center with total equal to 100px. here the code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
background-repeat: no-repeat;
background-position: center center;
border:1px solid green;
padding:10px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go">» Run</button>
<div id="block">Hello!</div>
<script>
$("#go").click(function(){
$("#block").animate({
width: "100px",
height: "100px",
opacity: 0.6,
}, 1500 );
});
</script>
</body>
感谢您。
推荐答案
怎么样了呢？
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="go">» Run</button>
<div id="block">Hello!</div>
</body>
CSS
div {
background-color:#bca;
background: #fff;
position: absolute;
top: 0px;
left: 0px;
margin-left: 50%;
margin-top: 50%;
background-repeat: no-repeat;
background-position: center center;
border:1px solid green;
padding:10px;
}
的jQuery
$("#go").click(function(){
$("#block").animate({
width: "100px",
height: "100px",
top: "-50px",
left: "-50px",
opacity: 0.6,
}, 1500 );
});
http://jsfiddle.net/theguywholikeslinux/87f4Y/
我用保证金左和保证金顶部居中和动画顶部：左：值，使箱长大，离开以及向下和向右
I used margin-left and margin-top for the centering and animated the top: and left: values to make the box grow up and left as well as down and right.
您可以有，如果你想在你好留在盒子的中心，以及添加一些额外的CSS。
You may have to add some extra CSS if you want the "Hello" to stay in the center of the box as well.
这篇关于动画的div和中心扩大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
