MooTools : 클릭/토글 입력 상자의 애니메이션 크기

Question

은 Mootools 만 사용할 수 있습니다!

<input id='input_box' value='Name' class="validate['required']" /> 

클래스는 Mootools의 바닥 확인을 위해입니다 : 좋아

그래서 기본적인 입력 상자가 있습니다.

그래서 내가 무엇을 생각하고있는 것은 이것이다 :

1) 입력 상자 안에 값의 텍스트를 가지고있다. 2) 사용자가 입력 박스를 클릭 할 때, 박스의 좌측 안쪽 슬라이드() 왼쪽에서 오른쪽으로, 그래서 지금 보여

는 는 이름 [에서 InputBox]

3) 사용자는 아웃 클릭

하면 상자에 아무 것도 입력하지 않고 상자 영역의 이름을 입력하면 원래 위치로 다시 슬라이드됩니다.

나는 이런 식으로 일을 생각했다 :

이 상자의 크기를 애니메이션 onlick 입력 상자 뒤에 배치 된 텍스트를 가지고, 다음 위치에있는 텍스트에 페이드. 그러나 Mootools의 지식은 정말 좋지 않을 것입니다.

 function introFunction() { 
     var input = new Fx.Style($('input_box'),'width':'200'); 
      input.start(200); 
    } 

그런 다음 onlick 해당 사항을 적용하지만, 작업 나던 : 나는 그것을 시도했다/

Answer 1

합니다. http://jsfiddle.net/fJjTN/1/

Fx 대신 tween을 사용했습니다. 입력 필드에 효과를 적용하는 대신 레이블에 적용했습니다. 의견의 피드백 후

편집
http://jsfiddle.net/47CAH/1/