Adjusting height immediately followed by ScrollTop is very jerky/choppy with jQuery

[Nixanneta]

I am trying to create a page which contains a bunch of blocks (that would usually contain 'overflow: hidden' text that can be expanded by clicking on the box). But when I click on the box to adjust its height (to show all the text) I also want to bring that box into focus by using ScrollTop. It looks weird if you click on the box to expand its height if it remains out of view within the browser window.I have a jQuery function that animates the height change and animates the ScrollTop repositioning nicely, however it often looks very choppy to me. It's not consistent. Sometimes it's pretty smooth, other times it'll adjust the box's height and then very abruptly scroll, which has a very unpleasant herky jerky effect. Adding to the odd behavior, is that I cannot scroll the window manually using my mouse for several seconds after the function completes. It's as if it's blocking manual mouse scroll.I've created a little jsfiddle (sans text that I would usually place inside the right-hand boxes).jsfiddle\[code\]$(document).ready(function() { $(".right").click(function() { var currentHeight = $(this).height(); $(this).animate({ height: (currentHeight == 100 ? 200 : 100) }, 400, function() { var offset = $(this).offset(); $('html, body').animate({ scrollTop: offset.top }, 1000); }); });});\[/code\]