javascript - jQuery动画DIV从中心到全 Angular 具有相同的高度/宽度

Question

我正在尝试将一个 div 从小尺寸动画化到全屏尺寸然后隐藏，但问题是，它不居中并且宽度和高度不相同，我该如何处理它，有人可以建议吗？

这是我到目前为止创建的:

$(document).ready(function() {
   $( ".circle-centered" ).animate({
	width:"100%",
	height:"100%",
        marginTop: -$('.circle-centered').outerHeight()/2
  }, 5000);
});

.circle-centered {
	width: 20px;
	height: 20px;
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	top: 50%;
	margin-top: -10px;
	border-radius: 50%;
	z-index: 3;
	background: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="circle-centered"></div>

Answer 1

您还需要为“top”属性设置动画，因为您已将其设置为 50%

$(document).ready(function() {
   $( ".circle-centered" ).animate({
	width:"100%",
	height:"100%",
    top:0,
        marginTop: -$('.circle-centered').outerHeight()/2
  }, 5000);
});

.circle-centered {
	width: 20px;
	height: 20px;
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	top: 50%;
	margin-top: -10px;
	border-radius: 50%;
	z-index: 3;
	background: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="circle-centered"></div>