animate a div and expand from center
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 i开发者_JAVA百科t 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>
Thank you.
How's this?
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.
You may have to add some extra CSS if you want the "Hello" to stay in the center of the box as well.
加载中,请稍侯......
精彩评论