jQuery 文档就绪时同时淡入和动画

Question

我有一个模态弹出窗口，我试图在文档准备就绪时同时淡入和设置动画，但我无法让它运行。我可以淡入淡出：

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

但我无法让它同时淡入和动画化。我试过了

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

但这对我也不起作用。和建议将不胜感激。

Answer 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>

jQuery 文档就绪时同时淡入和动画

jQuery fade in and animate at the same time on document ready

jquery

modal-dialog

jquery-animate