javascript - Expand div from center of the body using jQuery -
how expand / grow div center? expands top left bottom right. here's 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; }
try make .growme
class center of body. adding top, left,bottom , right 0.
$('.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; top:0; left:0; bottom:0; right:0; margin:auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="growme">test</div>
**
or
**
you can use transition
same.
$('.growme').animate({ width: '100%', height: '100%', opacity: 1, }, 'normal');
.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; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="growme">test</div>
Comments
Post a Comment