使用jquery

Question

我使用jquery对div进行了排序，并添加了一些过渡。

当第一个div取代第二个div时，转换有效但当第二个div取代第一个div时它不起作用。

有没有办法可以两种方式完成。

jQuery代码：

$("body").on('click tap', '.sort-arrows .fa-arrow-down', function(e) {
  e.preventDefault();
  var pos = $(this).parent().index();
  var elem = $(this).closest("div").parent();
  if (elem.index() <= (elem.siblings('div').length - 1)) {
    elem.fadeOut('slow', function() {
      elem.insertAfter(elem.next('div')).fadeIn('slow');
    });
  }

});
$("body").on('click tap', '.sort-arrows .fa-arrow-up', function(e) {
  e.preventDefault();
  var pos = $(this).parent().index();
  var elem = $(this).closest("div").parent();
  if (elem.index() > 0) {
    elem.fadeOut('slow', function() {
      elem.insertBefore(elem.prev('div')).fadeIn('slow');
    });
  }
});

演示 - https://jsfiddle.net/gvyoj63a/6/

任何建议都受到高度赞赏。