CODEWITHSUNDEEP
javascriptjquerycssjquery-animate
bcsta
bcsta

Reputation: 2317

jquery animate() function is not triggering on form

I have a form with multiple child elements like below. In my CSS I initialized this form to be completely transparent and with jQuery .animate() I would like it to move upwards and become opaque when I click a button.

In jQuery, I am first loading the parent element from a separate PHP file and making the parent element visible in CSS. Then I am calling animate on modal-content which is not working.

$(".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>

Upvotes: 1

Views: 126

Answers (2)

Udochukwu Enwerem
Udochukwu Enwerem

Reputation: 2823

Your load() method is asynchronous. Meaning, it doesn't necessarily complete before the code following it. So, attach any code you want executed after the load() in a callback attached as the second parameter argument.

$(".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>

Upvotes: 1

bcsta
bcsta

Reputation: 2317

I managed to make it work. The problem was that I wrote the PHP in another file and was loading that PHP file on click. when I placed $(".modal").load("login_signup_popup.php"); in the beginning of the jquery document, the animation worked. Could someone give a reason why this happens? why does the loading of the PHP snippet has to be done much earlier?

Upvotes: 0

Related Questions