title: Issue with `display:inline-block` CSS property
body: <p>I have made recently one answer to another user about a generic method for <a href="http://api.jquery.com/slideup/" rel="nofollow noreferrer">JQuery::slideUp()</a> sequentially multiple items. If you want a reference, you can check it here:</p>
  
  <p><a href="https://stackoverflow.com/questions/54639862/slide-up-elements-in-a-sequential-order/54639922#54639922">slide up elements in a sequential order</a></p>
  
  <p>After come to a solution the <code>OP</code> asked me about an <strong>initial jumping effect</strong> that you can observe on the next code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('button').on('click', function()
  {
      close_all($(".block"));
  });
  
  function close_all(elements, idx=0)
  {
      if (idx &gt;= elements.length)
          return;
  
      let cb = () =&gt; close_all(elements, idx + 1);    
      elements.eq(idx).slideUp(2000, cb);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.block {
    display: inline-block;
    width:14%;
    background:gold;
    margin:0 9px;
  }
  
  #block1{
    height:54px;
  }
  
  #block2{
    height:25px;
  }
  
  #block3{
    height:72px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class='block' id='block1'&gt;BLOCK 1&lt;/div&gt;
  &lt;div class='block' id='block2'&gt;BLOCK 2&lt;/div&gt;
  &lt;div class='block' id='block3'&gt;BLOCK 3&lt;/div&gt;
  &lt;button&gt;CLICK&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>After digging a little about it, I have come that this is related to <code>display:inline-block</code> property he has over the <code>.block</code> elements. For what I have read so far (I'm not experimented on <code>CSS</code>) this property it a sort of replacement for <code>float:left</code>. So I decided to change the style to use <code>float:left</code> instead of <code>display:inline-block</code> and the issue disappear. You can check it on next code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('button').on('click', function()
  {
      close_all($(".block"));
  });
  
  function close_all(elements, idx=0)
  {
      if (idx &gt;= elements.length)
          return;
  
      let cb = () =&gt; close_all(elements, idx + 1);    
      elements.eq(idx).slideUp(2000, cb);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.block {
    float: left;
    width:14%;
    background:gold;
    margin:0 9px;
  }
  
  #block1{
    height:54px;
  }
  
  #block2{
    height:25px;
  }
  
  #block3{
    height:72px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class='block' id='block1'&gt;BLOCK 1&lt;/div&gt;
  &lt;div class='block' id='block2'&gt;BLOCK 2&lt;/div&gt;
  &lt;div class='block' id='block3'&gt;BLOCK 3&lt;/div&gt;
  &lt;button&gt;CLICK&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Anyone has idea why the issue appears when we use <code>display:inline-block</code>?</p>