jquery - jQuery 动画导致边距移动，如何防止这种情况？

Question

我正在使用 jQuery 动画来使某些图像变小，而同时使其他图像变大。问题是在变小和变大之间，幻灯片下的内容正在跳跃，我将如何预测容器的宽度并保持这种状态？这个例子在这个页面上，所以你可以看到它是如何跳转的http://goo.gl/tAVxgI

jQuery 代码。

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

解决方案是为#slider_bar.

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

如果最大图像的高度未知或动态，则可以使用 jQuery 设置属性

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