使用jQuery从body的中心扩展div

Question

我怎样才能从中心扩展/发展div？ 它目前从左上角扩展到右下角。这是jsFiddle。

<div class="growme">test</div>

$('.growme').animate({
    width: '100%',
    height: '100%',
    opacity: 1,
}, 'normal');

.growme {
    background-color: #990000;
    height: 0;
    width: 0;
    position: absolute;
    filter: alpha(opacity=0);
    opacity: 0;
}

Answer 1

尝试这样做你身体的.growme班级中心。将top，left，bottom和right添加为0。

＆＃13;

＆＃13;

$('.growme').animate({
    width: '100%',
    height: '100%',
    opacity: 1,
}, 'normal');

＆＃13;

.growme {
    background-color: #990000;
    height: 0;
    width: 0;
    position: absolute;
    filter: alpha(opacity=0);
    opacity: 0;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="growme">test</div>

＆＃13;

＆＃13;

＆＃13;

**

或者

**

您也可以使用transition。

＆＃13;

＆＃13;

$('.growme').animate({
    width: '100%',
    height: '100%',
    opacity: 1,
}, 'normal');

＆＃13;

.growme {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    margin: auto;
    background-color: #990000;
    position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="growme">test</div>

＆＃13;

＆＃13;

＆＃13;