0

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);
}
HelpNeeder
  • 6,383
  • 24
  • 91
  • 155

1 Answers1

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);
RSquared
  • 1,168
  • 9
  • 19
  • It is responsive, so I can't really predict what the minimum height going to be, though. – HelpNeeder Feb 05 '15 at 23:58
  • You sure can! When the window resizes, just find out the max height of the image and apply it to the `#slider_bar` element – RSquared Feb 06 '15 at 00:07
  • Ah! It took me a while, but I think I understand it. So you're saying every time I render the page or resize it, just check the height of my tallest image, and then set the slider_bar's height appropriately. Hmm... Seems like it make sense. Thanks. – HelpNeeder Feb 06 '15 at 01:02