jquery insertafter 및 insertbefore에 슬라이딩 애니메이션 추가

Question

애니메이션 이동 효과를 위쪽 및 아래쪽 정렬 이동에 추가하는 방법.

위쪽 및 아래쪽 텍스트 링크를 클릭하여 이동을 확인할 수 있습니다.

여기에 애니메이션을 생성하려면 코드

$(document).ready(function(){ 
    $('.move-up').click(function(){ 
     if ($(this).prev()) 
      $(this).parent().insertBefore($(this).parent().prev()); 
    }); 
    $('.move-down').click(function(){ 
     if ($(this).next()) 
      $(this).parent().insertAfter($(this).parent().next()); 
    }); 
}); 

DEMO

Answer 1

어쩌면이 같은 당신을 도울 수 : http://jsfiddle.net/eJk3R/38/

$(document).ready(function(){ 
    $('.move-up').click(function(){ 
     if ($(this).prev()){ 
      var t = $(this); 
      t.parent().animate({top: '-20px'}, 500, function(){ 
       t.parent().prev().animate({top: '20px'}, 500, function(){ 
        t.parent().css('top', '0px'); 
        t.parent().prev().css('top', '0px'); 
        t.parent().insertBefore(t.parent().prev()); 
       }); 
      }); 
     } 
    }); 
    $('.move-down').click(function(){ 
     if ($(this).next()){ 
      var t = $(this); 
      t.parent().animate({top: '20px'}, 500, function(){ 
       t.parent().next().animate({top: '-20px'}, 500, function(){ 
        t.parent().css('top', '0px'); 
        t.parent().next().css('top', '0px'); 
        t.parent().insertAfter(t.parent().next()); 
       }); 
      }); 
     } 
    }); 
}); 

완벽하지는 않습니다. 애니메이션을 시작하기 전에 조금 더 코드를 정리하고 조금 더 나은/좋게하기 전에 요소의 존재 여부를 테스트해야합니다.

또한 스타일에 position: relative;을 추가했습니다.

Answer 2

사용 .animate입니다.

예를 들어

, 나는이 희망

$(this).parent().insertBefore($(this).parent().prev()).animate({..}); 
$(this).parent().insertBefore($(this).parent().next()).animate({..}); 

Answer 3

당신이 찾고있는 무엇을 ->DEMO

if ($(this).prev()) 
$(this).parent().insertBefore($(this).parent().prev()); 
$(this).parent().animate({ 
opacity: 0.1 
}, 1500); 

Answer 4

숨기기 및 표시 순서를 추가하기 만하면됩니다.

jQuery(html_usr).insertBefore("#log_row").hide().show('slow');