0

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

1 に答える 1