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

我正在使用jQuery动画来缩小某些图像，而同时又使其他图像更大。问题在于，在缩小尺寸和更大尺寸之间，我的内容在幻灯片下跳跃，我怎么会预测容器的宽度，并保持这种方式？这个例子就在这个页面上，所以你可以看到它是如何跳转的http://goo.gl/tAVxgI jQuery动画导致页边移动，如何防止？

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

来源

2015-02-05 HelpNeeder

解决方法是将最小高度设置为#slider_bar。

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

如果最大图像的高度是未知的或动态的，那么你可以设置使用jQuery

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

来源

2015-02-05 23:50:38 RSquared

这是响应的财产，所以我真的不能预测的最小高度要什么尽管如此。 – HelpNeeder 2015-02-05 23:58:27

你当然可以！当窗口调整大小时，只需找出图像的最大高度并将其应用于'＃slider_bar'元素 – RSquared 2015-02-06 00:07:16

啊！我花了一段时间，但我想我明白了。所以你说我每次渲染页面或调整它的大小，只需检查我的最高图像的高度，然后适当地设置slider_bar的高度。嗯...似乎是有道理的。谢谢。 – HelpNeeder 2015-02-06 01:02:38

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

回答

相关问题