셀별로 표 셀의 요소를 애니메이션화하는 방법은 무엇입니까?

Question

테이블 셀에 요소가 있는데 느린 애니메이션으로 다른 셀 방향으로 이동해야합니다. 내가 어떻게 해. 데모 DEMO

에서

<table> 
<td .. 

</table> 

보면 나는 테이블의 셀에 의해 서서히 요소를 이동 세포하고자하는 이전 thread

에서 일부 리소스있어? 데모에서 누락 된 것이 있습니까?

Answer 1

바이올린의 코드는 작동해야하지만 루프에서 애니메이션 호출을 실행하면 속도가 빨라집니다. 모든 애니메이션을 더 많이 또는 덜 동시에 호출합니다. 방법을 조금 변경했습니다 :

$("#move").bind("click",animate); 

var direction=[4,7,8,11] 
function animate(){ 
    // initalize with first element of direction array 
    moveAnimate("#p11",0); 
} 


function moveAnimate(element, count){ 
    if(count >= direction.length) {return; } 
     // set the newParent 
     var newParent = '#pos' + direction[count], 
      element = $(element); //Allow passing in either a JQuery object or selector 

    newParent= $(newParent); //Allow passing in either a JQuery object or selector 
    var oldOffset = element.offset(); 
    element.appendTo(newParent); 
    var newOffset = element.offset(); 

    var temp = element.clone().appendTo('body'); 
    temp.css('position', 'absolute') 
     .css('left', oldOffset.left) 
     .css('top', oldOffset.top) 
     .css('zIndex', 1000); 
    element.hide(); 
    temp.animate({'top': newOffset.top, 'left':newOffset.left}, 'slow', function(){ 
     element.show(); 
     temp.remove(); 
     // increase the counter 
     count++; 
     // call next animation after the current one is finished 
     moveAnimate(element,count); 
    }); 
} 

업데이트 됨 fiddle is here.