Question

I have this demo with four boxes that are positioned relative to one another. When one box grows I want the other boxes to adjust their position. In the demo, if you hover over the first box the transition expands the box. Only after it ends do the other boxes jump into their correct position.

How do I make the boxes to move together with the transition?

$('body').on('mouseover', '#f', function (e) {
        $($(this)).effect("size", { to: { width: 181, height: 266} }, 1000);
    });

​

http://jsfiddle.net/XS93k/

Answer 1

This did the trick…

$('body').on('mouseover', '#f', function (e) {
           $(this).animate({
    height: '266px',
    width: '181px'
  }, 1000, function() {
    // Animation complete.
  }); });