jQuery将DIV从中心动画到全宽，具有相同的高度/宽度

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>

Answer 2

我不知道你为什么设置margin-top：-10px，但是我的测试它运行良好。

https://fiddle.jshell.net/tr9ojbxn/

我刚刚添加了动画的顶部。 让我知道。

干杯