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/

使用jquery平滑过渡到divs排序

1 个答案: