Trying to create an animation that expands a box to full screen. However, when I set the position to fixed before the animation begins, the box quickly moves up to the upper left corner.
Is there a way to make it expand from its original location instead?
setTimeout(function() {
$('.test').css({
position: 'fixed',
top: 0,
left: 0,
margin: 0
});
$('.test').animate({
height: $(window).height(),
width: $(window).width()
}, 200);
}, 2000);.test {
margin: 0 50px;
background: blue;
height: 200px;
width: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="test"></div>