애니메이션 중간에 JQuery ScrollTop?

Question

나는 폭이 변하는 2 개의 컨테이너가 있습니다. 그 안에는 클릭 가능한 요소가 있습니다. 컨테이너를 클릭하면 애니메이션에서 크기가 조절됩니다. 클릭 가능한 요소를 클릭하면 해당 컨테이너의 크기가 조정되고 클릭 된 요소로 스크롤되도록 구성하려고합니다. 여기에 이것을 보여주는 바이올린이 있습니다 : http://jsfiddle.net/w7H3M/1/

그러나 크기 조정 때문에 잘못된 위치로 스크롤됩니다. 클릭 이벤트 처리기는 다음과 같습니다.

<div id=left>...</div> 
<div id=right>...</div> 

$('#left').on('click', 'a', function() { 
    var node = $(this); 
    $('#left').animate({ 
     width: 0.75 * $(document).width() 
    }, 800); 
    $('#right').animate({ 
     width: 0.25 * $(document).width() 
    }, 800); 

    $('body').animate({ 
     scrollTop: node.offset().top 
    }, 800); 
}); 

$('#right').on('click', 'a', function() { 
    var node = $(this); 
    $('#left').animate({ 
     width: 0.25 * $(document).width() 
    }, 800); 
    $('#right').animate({ 
     width: 0.75 * $(document).width() 
    }, 800); 

    $('body').animate({ 
     scrollTop: node.offset().top 
    }, 800); 
}); 

Answer 1

효과적으로 애니메이션 때문에 제대로 작동하지 않습니다. div가 확장되면 화면 상단에 표시 할 노드의 오프셋이 변경됩니다. 원하는 것을 얻으려면 애니메이션이 완료 될 때 scrollTop 속성을 설정해야합니다. jQuery.animate()의 전체 처리기를 사용하여이 작업을 수행 할 수 있습니다. 나는 당신에게 그것을 보여주기 위해 jsfiddle을 갈 렸습니다. 유일한 문제는 두 개의 애니메이션이 동시에 재생되는 것이 아니라 하나씩 재생된다는 것입니다.

$(document).ready(function() { 
// generate content 
var str = ''; 
for (i = 1; i < 100; i++) { 
    str += '<p>' + x100(i) + '</p>'; 
} 
$('#left').html(str); 
$('#right').html(str); 
// end generate content 

$('#left').on('click', 'p', function() { 
    var node = $(this); 
    $('#left').animate({ 
     width: 0.75 * $(document).width(), 
    }, 800, 'swing', function() { 
     $('body, html').animate({scrollTop: node.offset().top}, 800); 
    }); 
    $('#right').animate({ 
     width: 0.25 * $(document).width() 
    }, 800); 


}); 

$('#right').on('click', 'p', function() { 
    var node = $(this); 
    $('#left').animate({ 
     width: 0.25 * $(document).width() 
    }, 800); 
    $('#right').animate({ 
     width: 0.75 * $(document).width() 
    }, 800, 'swing', function() { 
     $('body, html').animate({scrollTop: node.offset().top}, 800); 
    }); 


}); 

});