平滑過渡到div使用jquery排序

Question

我想添加一個平滑的過渡到我使用jQuery進行排序的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(); 
    elem.next().after(elem).animate(1000); 
}); 
$("body").on('click tap', '.sort-arrows .fa-arrow-up', function(e) { 
    e.preventDefault(); 
    var pos = $(this).parent().index(); 
    var elem = $(this).closest("div").parent(); 
    elem.prev().before(elem).animate(1000); 
}); 

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

任何幫助，高度讚賞。

Answer 1

使用這個帖子得到了一個解決方案 - Re-ordering div positions with 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(); 
    alert(elem.index()); 
if (elem.index() <= (elem.siblings('div').length - 1)){ 
    elem.fadeOut('slow', function() { 
     //elem.next().after(elem).fadeIn('slow'); 
     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(); 
    alert(elem.index()); 
    if (elem.index() > 0) { 
    elem.fadeOut('slow', function() { 
     // elem.prev().before(elem).animate(1000); 
     elem.insertBefore(elem.prev('div')).fadeIn('slow'); 
    }); 
    } 
}); 

任何我的演示是 - https://jsfiddle.net/gvyoj63a/5/