jquery animate() 函数未在表单上触发答案

【问题标题】：jquery animate() function is not triggering on formjquery animate() 函数未在表单上触发
【发布时间】：2019-12-23 23:41:24
【问题描述】：

我有一个包含多个子元素的表单，如下所示。在我的 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>

【问题讨论】：

我将代码放在一个可执行的 sn-p 中，它看起来工作得很好。请在控制台中检查您的本地版本是否有错误。
绝对没有错误。所以肯定有来自其他东西的一些CSS干扰，对吗？ modal（父级）一开始是不可见的，就在动画显示之前。上面的 sn-p 中没有显示这可能是问题吗？
是的，这也是可能的。

标签： javascript jquery css jquery-animate

【解决方案1】：

我设法让它工作。问题是我在另一个文件中编写了 PHP，并在单击时加载了该 PHP 文件。当我将 $(".modal").load("login_signup_popup.php"); 放在 jquery 文档的开头时，动画就起作用了。有人可以给出发生这种情况的原因吗？为什么 PHP sn-p 的加载要提前很多？

【讨论】：

【解决方案2】：

您的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>

【讨论】：