입력 상자에 중심을

Question

바이올린 왼쪽 텍스트 정렬 전환을 애니메이션 할 수있는 방법이 있나요 : http://jsfiddle.net/p7gFh/

HTML :

<input id = 'box' value = 'some text'/> 

CSS :

#box { 
    text-align:left; 
} 

JS :

가

$('#box').on('click', function() { 
    $(this).css({'textAlign':'center'}, 500); 
}); 

오른쪽 이제 텍스트가 클릭시 중심으로 스냅됩니다. 나는 .animate()를 시도했지만 아무 일도 일어나지 않았다. 스냅하지 않고 텍스트 정렬 왼쪽에서 가운데로 부드럽게 전환하는 방법이 있습니까?

Answer 1

이것을 달성하는 유일한 방법은 입력 내부의 텍스트를 모방 한 임시 요소를 사용하여 펑키 한 비하인드 마술을 사용하는 것입니다. 여기

는 작업 예제 : http://jsfiddle.net/xLg93/

$('#box').on('focus', function() { 
    var full_width = $(this).width(); 
    var t = document.createElement('span'); 
    t.innerHTML = $(this).val(); 
    t.style.visibility = 'hidden'; 
    document.body.appendChild(t); 
    var text_width = $(t).width(); 
    document.body.removeChild(t); 
    $(this).animate({ 
     'text-indent': (full_width - text_width)/2 
    }); 
}); 

그렇지 않으면, 당신은 입력 상자에 동일하게 임시 요소의 글꼴 크기, 글꼴 얼굴과 자간의 스타일을해야 마음에 보관 정확한 중심에 애니메이션을 적용하지 않습니다.

Answer 2

이것은 오래된 질문이지만 최근에 같은 문제가있어 여기에 대한 대답이 잘못되어 만족스럽지 않습니다.

:

• 당신은 이 (3)
• 당신 도이 내 솔루션입니다 그것을

의 하드웨어 가속 transform: translate() 기술을 사용할 수있는 순수 CSS를 사용하여 애니메이션을 적용 할 수 있습니다

setTimeout(function() { 
 
    $('.b').addClass('left'); 
 
}, 5000);

.b { 
 
    transform: translateX(50%); 
 
    transition: transform ease-in-out 1000ms; 
 
} 
 
.c { 
 
    display: inline-block; 
 
    transform: translateX(-50%); 
 
    background: green; 
 
    transition: transform ease-in-out 1000ms; 
 
} 
 
.b.left, 
 
.b.left .c { 
 
    transform: translateX(0%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="b"> 
 
    <div class="c">CENTERED TEXT</div> 
 
</div>