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);
}