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{ 
    min-height: 370px; 
    ... 
} 

가장 큰 이미지의 높이를 알 수없는 또는 동적 인 경우에, 당신이 jQuery를

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