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

jQuery 动画导致边距移动，如何防止？

jQuery animation causing margin movement, how to prevent this?

jquery

animation

responsive-design

responsive-slides