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>

Answer 2

我设法让它工作。 问题是我在另一个文件中编写了 PHP，并在单击时加载了该 PHP 文件。 当我放置$(".modal").load("login_signup_popup.php"); 在 jquery 文档的开头，动画起作用了。 有人可以给出发生这种情况的原因吗？ 为什么必须更早地加载 PHP 代码片段？