javascript - 我的动画div在动画过程中向上倾斜而不是向下倾斜

我制作了一个基本div，其中包含标题和一个段落，当我执行多步动画时，该框向上倾斜而不是向下倾斜。它使它看起来非常小故障和奇怪。您可以在https://jsfiddle.net/yajuy8qy/查看我的错误。
码:

<div class="enlarge">
    <h1 class="title">Welcome!</h1>
    <p>Zach</p>
    </div>
<script>
$(document).ready(function() {
$(".enlarge").animate({minHeight: '500px'}, "slow");
$(".enlarge").animate({width: '80%'}, "slow");
});
</script>
<style>
.enlarge {
height: 500px;
width: 50%;
background-color: #2098D1;
align-items: center;
align-content: center;
border-radius: 15px;
position: relative;
margin: 10px auto;
}
</style>

谢谢!

最佳答案

默认的padding属性似乎存在问题。尝试在div上设置填充(即使出现1像素也可以修复毛刺)。

.enlarge{
    padding: 1px;
}