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