javascript - jquery animate() 函数没有在表单上触发

Question

我有一个包含多个子元素的表单，如下所示。在我的 CSS 中，我将此表单初始化为完全透明，并且使用 jQuery .animate() 我希望它向上移动并在我单击按钮时变得不透明。

在 jQuery 中，我首先从一个单独的 PHP 文件加载父元素，并使父元素在 CSS 中可见。然后我在 modal-content 上调用动画，但它不起作用。

$(".purchase").on("click", function() {
  console.log("clicked");

  $(".modal").load("login_signup_popup.php");
  $(".modal").css("display", "block");

  $(".modal-content").animate({
    opacity: 1,
    top: "100px"
  }, 2000);
});

.modal-content {
  display: block;
  position: absolute;
  left: 10%;
  top: 500px;
  background-color: #fefefe;
  width: 80%;
  font-family: "Open Sans", serif;
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="purchase">Purchase</a>
<form class="modal-content" action="/SignUp.php">
  <input type="text" id="foo" name="foo" />
</form>

Answer 1

您的load() 方法是异步的。意思是，它不一定在它后面的代码之前完成。因此，在作为第二个参数参数附加的回调中，在 load() 之后附加您想要执行的任何代码。

$(".purchase").on("click", function() {
  console.log("clicked");

  $(".modal").load("login_signup_popup.php",
function() {
         $(".modal").css("display", "block");

         $(".modal-content").animate({
             opacity: 1,
             top: "100px"
         }, 2000);
    });
 
});

.modal-content {
  display: block;
  position: absolute;
  left: 10%;
  top: 500px;
  background-color: #fefefe;
  width: 80%;
  font-family: "Open Sans", serif;
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="purchase">Purchase</a>
<form class="modal-content" action="/SignUp.php">
  <input type="text" id="foo" name="foo" />
</form>