Q:

Add effect when a div has been removed

I want add effect to this "move up" of other div when I remove one.
Here html:
<ul id="fds">
  <li>
    <h3>one</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
  <li>
    <h3>two</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
  <li>
    <h3>three</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
  <li>
    <h3>four</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
</ul>

Here JavaScript:
$("#fds").delegate(".remove", 'click', function() {
    var $li = $(this).closest("li");
  $li.fadeOut(300, function() {
    $li.remove();
  })
})

Here a JS to test this. 

A:

Set the top margin to minus the height to give a better UX.

$("#fds").delegate(".remove", 'click', function() {
    var $li = $(this).closest("li");
    
  $li.css({opacity: 0}).animate({marginTop: -1 * $li.height()}, 400, function() {$li.remove();})
})
li
{
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="fds">
  <li>
    <h3>one</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
  <li>
    <h3>two</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
  <li>
    <h3>three</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
  <li>
    <h3>four</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
</ul>

