jQuery 在文档准备好时同时淡入和动画答案

【问题标题】：jQuery fade in and animate at the same time on document readyjQuery 在文档准备好时同时淡入和动画
【发布时间】：2019-09-10 15:30:27
【问题描述】：

我有一个模态弹出窗口，我试图在文档准备好时同时淡入和制作动画，但我无法让它发挥作用。我可以淡入淡出：

$(document).ready(function () {
    $(".modal").fadeIn("slow");
});

但我不能让它同时淡入和动画。我试过了

$('.modal').animate({ opacity: 1, top: "-10px" }, 'slow');

但这对我也不起作用。我们将不胜感激。

【问题讨论】：

如果没有看到弹出窗口的一些 HTML 模型，很难提供帮助。你能提供更多信息吗？
调用这两种方法：$(".modal").fadeIn("slow").animate({ opacity: 1, top: "-10px" }, 'slow')
感谢 Rory，但该代码在 THEN 动画中消失了。它不会同时进行。
Tomas - 模态 html 就是这样：
一些内容

标签： jquery modal-dialog jquery-animate

【解决方案1】：

你可以使用不透明动画：

$(document).ready(function () {
	$('.modal').css('display', 'block'); //if you have display: none on the element
	$('.modal').animate({ opacity: 0 }, 0);
    $('.modal').animate({ opacity: 1, top: "-10px" }, 'slow');
});

.modal {
  height: 200px;
  width: 200px;
  background-color: red;
  display: none;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal">Some content</div>

【讨论】：