이 jQuery 애니메이션에 대한 도움이 필요합니다.

Question

스왑 된 두 항목 사이에 슬라이드 효과와 같은 몇 가지 목록 항목과 ID가 있습니다.

이것은 내가 지금까지 가지고있는 것입니다. 이 애니메이션은 처음에는 작동하지만 그 이후에는 원래 이동 된 목록 항목의 '최상위'값은 0이며 그 이유는 확실하지 않습니다. 나는 이것이 이유라고 생각하지만 확실하지 않다. 애니메이션이 완료되면 위치를 정상으로 다시 설정하려고 시도했으나 작동하지 않았습니다.

listItemPushed는 listItem가

listItemPushed.css('position', 'relative'); 
listItem.css('position', 'relative'); 

var top1 = listItemPushed.position().top; 
var top2 = listItem.position().top; 

listItemPushed.animate({ top: (top2-top1) }, 300); 
listItem.animate({ top: (top1 - top2) }, 300, 'linear', function() { 
    listItemPushed.before(listItem); 
}); 

Answer 1

animate이 li 항목의 스타일 속성에 CSS를 추가하고 아래 <li>이며, 상단에 <li>입니다.

당신은 아마 이러한 추가 스타일

시도 확인이 값을 취소해야합니다 당신은 아마 당신이 밀어 이동 한 후 다음 CSS를 콜백 함수에 속성을 삭제해야

alert(listItem.css('top')); 
alert(listItemPushed.css('top')); 

을 li

so

listItemPushed.animate({ top: (top2-top1) }, 300); 
listItem.animate({ top: (top1 - top2) }, 300, 'linear', function() { 
    listItemPushed.before(listItem); 
}); 

wou 신분증이 조금 더 생각하면 ... 같은

listItemPushed.animate({ top: (top2-top1) }, 300); 
listItem.animate({ top: (top1 - top2) }, 300, 'linear', function() { 
    listItemPushed.before(listItem); 

    listItem.css('top', '0'); 
    listItemPushed.css('top', '0'); 

}); 

뭔가가, 당신이 상위 요소의 높이와의 높이에 의해 위에서 아래 요소로 바닥 객체를 이동해야한다고 생각 하단 하나.

는 jquery's height method에서 살펴 :

listItem.height()