title: Changed css() value is not captured by the next statement. Why?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let tog = true;
  
  $("#toggle_form").click(()=&gt; {
      toggle()
  })
  
  const toggle = () =&gt; { 
      if(tog === true) { 
          
          $("#toggle_form").text("Register")
          $("#LoginForm").css("opacity", "1")
          $("#RegForm").css("left", "-100%")
          
          $("#LoginForm").css("left", "0px")
          $("#RegForm").css("transition", "left 0.5s")
          $("#LoginForm").css("transition", "left 0.5s")
  
          console.log($("#RegForm").css("left"))
  
          if($("#RegForm").css("left") === "-300px") { 
              console.log($("#RegForm").css("left") + " HERE")
              $("#RegForm").css("opacity", "0")
          }
  
          tog = !tog;
      } else {
          console.log($("#RegForm").css("left"))
          $("#toggle_form").text("Login")
          $("#RegForm").css("opacity", "1")
          $("#LoginForm").css("left", "-100%")
          $("#RegForm").css("left", "0px")
          $("#RegForm").css("transition", "left 0.5s")
          $("#LoginForm").css("transition", "left 0.5s")
  
          if($("#LoginForm").css("left") === "-300px") { 
              $("#LoginForm").css("opacity", "0")
          }
          
          tog = !tog;
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* { 
      padding: 0;
      margin: 0;
      box-sizing: border-box;
  }
  
  .form { 
   display: inline-block;
   border: 1px solid;
   padding: 10px;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: #f1f1f1;
  }
  
  #RegForm {
      top: 0px;
      left:0px;
  }
  
  
  #LoginForm {
      top: 0;
      left:-100%;
      opacity: 0;
  }
  
  
  .input_field { 
      display: block;
      padding: 10px;
      width: 100%;
  }
  
  .wrapper { 
      
      text-align: center;
  }
  
  .SubBtn { 
      padding: 15px;
      width: 100%;
      font-size: 20px;
      cursor: pointer;
      margin-top: 10px;
      background-color:rgb(10, 157, 248);
      border: none;
      color: white;
  }
  
  .wrapper label { 
      display: inline-block;
      padding: 10px;
      font-size: 20px;
  }
  
  #container { 
      position: relative;
      width: 300px;
      height: 250px;
      display: inline-block;
      top: 100px;
      left:200px;
  }
  
  #toggle_form { 
      position: relative;
      top:-50px;
      left: 130px;
      padding: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;script src="https://code.jquery.com/jquery-3.6.0.js"&gt;&lt;/script&gt;
  
  &lt;div id="container"&gt;
      &lt;button id="toggle_form"&gt;Login&lt;/button&gt;
      &lt;form id="RegForm" class="form"&gt;
          &lt;div id="username-wrapper" class="wrapper"&gt;
              &lt;label for="inp_username"&gt;Username&lt;/label&gt;
              &lt;input type="text" id="reg_username" class="input_field" name="inp_username"&gt;
          &lt;/div&gt;
          &lt;div id="password-wrapper" class="wrapper"&gt;
              &lt;label for="inp_password"&gt;Password&lt;/label&gt;
              &lt;input type="text" id="reg_password" class="input_field" name="inp_password"&gt;
          &lt;/div&gt;
          
          &lt;button id="SubmitReg" type="submit" class="SubBtn"&gt;Register&lt;/button&gt;
      &lt;/form&gt;
      
      &lt;form id="LoginForm" class="form"&gt;
          &lt;div id="username-wrapper" class="wrapper"&gt;
              &lt;label for="inp_username"&gt;Username&lt;/label&gt;
              &lt;input type="text" id="login_username" class="input_field" name="inp_username"&gt;
          &lt;/div&gt;
          &lt;div id="password-wrapper" class="wrapper"&gt;
              &lt;label for="inp_password"&gt;Password&lt;/label&gt;
              &lt;input type="text" id="login_password" class="input_field" name="inp_password"&gt;
          &lt;/div&gt;
          
          &lt;button id="SubmitLogin" type="submit" class="SubBtn"&gt;Login&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>So, I am toggling between <code>#LoginForm</code> and <code>#RegForm</code>, and I want to make the <code>(&quot;left&quot;, &quot;-100%&quot;)</code> element <code>opacity 0</code>, but the issue I am having is that, the <code>opacity</code> is executed first before the position movement, which results in not seeing the movement of the element at all.</p>
  <p>For that reason, I made a condition to only execute the <code>opacity</code> once <code>(&quot;left&quot;) === &quot;-300px&quot;)</code>, which is <code>-100%</code> in <code>px</code>, but it's not working again, because, for some reason, <code>(&quot;left&quot;, &quot;-100%&quot;)</code> is not captured by the condition. The <code>console.log()</code> shows that <code>left</code> remains <code>0px</code>. Putting the <code>console.log()</code> at the beginning of the <code>else()</code> shows that <code>left</code> is now <code>-300px</code>, so that means, <code>left</code> has become <code>-300px</code>, but it's just not captured in the same <code>if</code> block.</p>
  <p>I've also experimented by making the conditional value <code>0px</code>, <code>if($(&quot;#RegForm&quot;).css(&quot;left&quot;) === &quot;0px&quot;)</code>, and the <code>opacity</code> is once again executed before the movement, which means, the condition is met and the statements inside executed BEFORE this <code>$(&quot;#RegForm&quot;).css(&quot;left&quot;, &quot;-100%&quot;)</code> statement is executed. Why?</p>
  <p>Why is this happening? Do you have any ideas how can I prevent this? The only explanation that I think of is that, the <code>css()</code> is changing too quickly to get captured by the next statements inside the same block.</p>