animate a div and expand from center

2019-07-15 08:10发布

站内问答 / HTML/CSS
853 1 4

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">&raquo; 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.

1条回答
We Are One
2楼-- · 2019-07-15 08:24

Hows this?

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/

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)