title: Why animate's callback function (complete) executed at start?
body: <p><strong>Duplicate:</strong></p>
  
  <p>Yes it is but a little bit different from <a href="https://stackoverflow.com/questions/5397260/animates-callback-function-complete-executed-at-start">this</a>.</p>
  
  <p>I'm using jQuery 3.1.0 This is my code:</p>
  
  <pre><code>$(document).ready(function () {
      ToggleAsideBar();
  });
  
  function ToggleAsideBar(){
  $(".ah-sidebar-toggle").click(function(){
      let toggleSize = $(".ah-logo").width() == 230 ? "50px" : "230px";
      $(".ah-logo").animate(
        { width: toggleSize },200,"linear",function () {alert("Animation Complete!");'}
      );
    });
  }
  </code></pre>
  
  <p><strong>Problem:</strong></p>
  
  <p>In my case, alert show before the animation starts. I want to show alert after the animation completed. Any thoughts what I am doing wrong in above code?</p>
  
  <p><strong>Live Example:</strong></p>
  
  <p><a href="https://jsfiddle.net/1n6kr20v/" rel="nofollow noreferrer">jsfiddle</a></p>