Moving right to left using animate in jquery-CodePudding

I am trying to animate the form using its ID to move rihgt to left. I already tried code bellow but this doesnt move the form content at all. Whats wrong i am doing here? Note: I am using Bootstrap v3.4.1

Html Code:

$("#formContent").css({ "left": "2000px" }).animate({ "left": "0px" }, "slow");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <h1><span id="firstLineTxt"></span></h1>
    <h1><span id="secondLineTxt"></span></h1>

    <div id="formContent">
      <div >
        <input  id="fullname" type="text" placeholder="Full Name">
      </div>
      <div >
        <input  id="email" type="text" placeholder="Email">
      </div>
      <button type="button" >Let's Start</button>
    </div>
  </div>
</div>

CodePudding user response：

As left only works on positioned elements, you could animate the translateX instead. It would also be better to use a css transition rather than using a jquery animation:

$(document).ready(() => {
  $("#formContent").addClass('animate');
})

#formContent {
  transform: translateX(100vw);
  transition: 2s ease-in-out;
}

#formContent.animate {
  transform: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <h1><span id="firstLineTxt"></span></h1>
    <h1><span id="secondLineTxt"></span></h1>

    <div id="formContent">
      <div >
        <input  id="fullname" type="text" placeholder="Full Name">
      </div>
      <div >
        <input  id="email" type="text" placeholder="Email">
      </div>
      <button type="button" >Let's Start</button>
    </div>
  </div>
</div>

If you didn't want to use jquery at all, you could just use a keyframes animation:

#formContent {
  animation: 2s forwards alternate slidein;
}

@keyframes slidein {
  from {
    transform: translateX(100vw);
  }

  to {
    transform: none;
  }
}

<div >
  <div >
    <h1><span id="firstLineTxt"></span></h1>
    <h1><span id="secondLineTxt"></span></h1>

    <div id="formContent">
      <div >
        <input  id="fullname" type="text" placeholder="Full Name">
      </div>
      <div >
        <input  id="email" type="text" placeholder="Email">
      </div>
      <button type="button" >Let's Start</button>
    </div>
  </div>
</div>