jquery - 在没有 "shooting up"的情况下固定位置的动画

Question

尝试将此框设置为全屏动画，但因为我在动画开始前将位置设置为固定，所以框会向上移动到左上角。

有没有办法让它从起始位置展开？

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>

Answer 1

我会混用一些 CSS 和 JS。试试这个: DEMO FIDDLE

JS:

$('.test').css({
    'top': $('.test').position().top,
});

setTimeout(function () {
    $('.test').addClass("full_screen");
}, 2000);


setTimeout(function () {
    $('.test').removeClass("full_screen");
}, 8000);

CSS:

html, body {
    width: 100%;
    height: 100%;
    position:relative;
}
.test {
    position: absolute;
    margin: 0 50px;
    background: #ccc;
    height: 200px;
    width: 200px;
    transition: all 4s;
}
.full_screen {
    top: 0px !important;
    height: 100%;
    width: 100%;
    margin: 0;
}