jQuery 애니메이션 및 텍스트 정렬 센터

Question

높이 및 너비가 설정되지 않은 상자에 애니메이션을 적용하려고했습니다. 지금까지는 약간의 문제 만 해결되었습니다.

이 상자에는 텍스트 단추가 포함되어 있습니다. 텍스트 단추는 모두 동일한 너비와 텍스트 중심에 있습니다. 문제는 모든 텍스트가 동일한 길이가 아니기 때문에 짧은 텍스트에 애니메이션을 적용하면 왼쪽에서 가운데로 스크롤됩니다. 큰 문제는 아니지만 조금 어리석은 것처럼 보입니다.

코드가 아래에 있으며, 여기에 설명 할 Fiddle입니다. (문제를보다 분명하게 보이기 위해 1500으로 애니메이션을 설정했습니다). 보시다시피 '짧은'단추가 가운데로 스크롤됩니다. 가능한 경우 - 단추가 중간에 '설정'되어 있으므로 애니메이트하는 동안 모두 올바른 위치에 있습니다.

나는 그것이 가능하다는 것을 전혀 모르지만, 그렇다면 어떤 도움을 주시면 감사하겠습니다.

HTML :

<div id="pref_boxwrap"> 
    <div id="pref_box" class="prefbox_m1 prefbox_cll"> 
     <div class="prefbox_mm11 prefbox_cld">Header</div> 
     <div class="prefbox_x222 act" _fsc="1,1910"> 
      <div class="prefbox_y222"><span class="sp1 prefbox_clb"><span class="sp2">Short</span></span> 
      </div> 
     </div> 
     <div class="prefbox_x222 act" _fsc="1,1920"> 
      <div class="prefbox_y222"><span class="sp1 prefbox_clb"><span class="sp2">This is a longer button <span id="fgr">('+tgr+'%)<span></span></span> 
      </div> 
     </div> 
     <div class="prefbox_x222 act" _fsc="1,1930"> 
      <div class="prefbox_y222"><span class="sp1 prefbox_clb"><span class="sp2">And another very very very long button <span id="fkl">('+tgr+'%)<span></span></span> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

CSS :

#pref_boxwrap { 
    position: absolute; 
    margin-top: 20px; 
    margin-left: 35px; 
    z-index:2030; 
} 
.prefbox_m1 { 
    position: absolute; 
    visibility: hidden; 
    font-size: 1em; 
    z-index:2926; 
    -webkit-box-shadow: 0 14px 14px 0px #000; 
    -moz-box-shadow: 0 14px 14px 0px #000; 
    box-shadow: -3px -3px 3px 0px #fff; 
} 
.prefbox_mm11 { 
    height: 24px; 
    padding: 2px 0 2px 9px; 
    color: #fff; 
    text-align: left; 
    font-weight: bold; 
    font-size: 100%; 
} 
.prefbox_x222 { 
    margin: 2px 0; 
    padding: 5px; 
    background: blue; 
} 
.prefbox_y222 { 
    line-height: 29px; 
    white-space: nowrap; 
    height: 29px; 
    width: 100%; 
    color: #fff; 
    background: orange; 
} 
.prefbox_y222 .sp1 { 
    display: block; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    border-top: 1px solid #fff; 
    border-left: 1px solid #fff; 
    border-bottom: 1px solid #333; 
    border-right: 1px solid #333; 
} 
.prefbox_y222 .sp2 { 
    padding: 0 15px; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
} 

UPDATE 나는 아래의 대답에 문제를 해결하지만 또 다른 문제는 상자 얻지 못한 애니메이션으로,이 있었다 더 이상 유연하지 않습니다. 따라서 버튼 텍스트를 바꾸거나 실행시 글꼴 크기를 변경해도 상자의 크기가 더 이상 변하지 않았습니다. jquery 애니메이션에 3 줄의 코드를 추가하여 해결했습니다. cointainer의 내용을 복사하고, CSS 이름을 변경하고 애니메이션을 적용한 후 컨테이너 내용을 바꿉니다. 조금 해킹되었지만 이제는 멋지게 작동합니다.

은 여기에서 새로운 작업 FIDDLE

Answer 1

설정 애니메이션을 시작하기 전에 아이 div에 (즉, 헤더와 컨테이너 버튼)에 고정 된 픽셀 너비. 내가이 줄을 추가 updated fiddle 참조 : 고정 폭

$("#pref_box > *").outerWidth(x); 

이 버튼은 애니메이션과 중앙 정렬 문제가 더 이상 없을 것 전반에 걸쳐 동일한 크기 일 것이다.

Answer 2

너비와 높이를 움직이는 것으로부터 생기는 문제를 정확히 줄이지는 못하지만 높이를 움직이게하는 것이 문제가 될 수 있을까요?

변경 행 :

$("#pref_box").width(0).height(0); 

$("#pref_box").height(0); 

및 제거 : 당신이 "아래로 접어"영향을 미칠 것입니다

width: x + "px", 

그런 식으로. 에 대한 CSS에 다음과 같은 속성을 추가하십시오 : min-width:300px; (또는 임의의 원하는 값)

어린이 요소의 너비는 100 %로 설정되어 있으므로 항상 애니메이션이 적용되는 부모의 현재 너비로 업데이트됩니다. 부모 요소의 고정 너비를 설정하고 높이 만 애니메이션하거나 어린이에게 고정 너비를 제공하면 해결됩니다.