jQuery animation causing margin movement, how to prevent this?

Question

I'm using a jQuery animation to make certain images smaller, while other bigger at the same time. The issue is that between making it small, and bigger, my content under the slideshow is jumping, how would I predict what will be the width of my container, and keep it that way? The example of this is on this page, so you can see how it jumps http://goo.gl/tAVxgI

The jQuery code.

function rotate_slider() {
    setTimeout(function() {
        var bigger = $(window).width() * 0.36;
        var size = $(window).width() * 0.32;

        $('#slider_bar').animate({'marginLeft' : '-=' + size + 'px'});

        $('img[data-id="'+ num +'"]').css('width', size);
        $('img[data-id="'+ num +'"]').css('margin-top', '15px');

        num++;

        $('img[data-id="'+ num +'"]').css('margin-bottom', '30px');

        $('img[data-id="'+ num +'"]').animate(
            {
                width: bigger
            }, 
            {
                duration: 200, 
                queue: false
            }
        );

        $('img[data-id="'+ num +'"]').animate(
            {
                'marginBottom': '0px'
            }, 
            {
                duration: 1, 
                queue: false
            }
        );

        $('img[data-id="'+ num +'"]').css('margin-top', 0);

        rotate_slider();
    }, 5000);
}

Answer 1

The solution would be to set a min-height to the #slider_bar.

#slider_bar{
   min-height: 370px;
   ...
}

If the height of the largest image is unknown or dynamic, then you can set the property using jQuery

$('#slider_bar').css('min-height', minHeight);