动画一个div和从中心

扩大我有一个简单的代码，扩展一个div水平和垂直地从中心，但只扩展到向左或向底部，我希望它扩展到两个侧（左= 50像素，右边= 50像素）或（顶部= 50像素，底部= 50像素）从中心总等于100px。这里的代码：动画一个div和从中心

<!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">&raquo; Run</button> 

<div id="block">Hello!</div> 
<script> 


$("#go").click(function(){ 
    $("#block").animate({ 
    width: "100px", 
    height: "100px", 
    opacity: 0.6, 
    }, 1500); 
}); 
</script> 

</body>

谢谢。

来源

2011-07-13 vikenoshi

怎么样了呢？

HTML

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <button id="go">&raquo; 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/

我用保证金左和上边距为中心和动画顶部：左：值，使箱长大了，离开以及向下和向右。

您可能需要如果你想要的“你好”留在盒子的中心，以及添加一些额外的CSS。

来源

2011-07-13 10:20:28 theguywholikeslinux

哇，太酷了，这是我想要的！谢谢你救了我的一天〜如果按节拍按钮旁边的向上和向下箭头，那么你可以记住我的答案为“接受”，每个人都会知道你的问题已经解决，什么解决办法是 – vikenoshi

@vike。 – theguywholikeslinux

动画一个div和从中心

回答

相关问题