MooTools：在點擊/切換時動畫輸入框的大小

好了，所以我有一個基本的輸入框：

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

課堂是MooTools的地面驗證。

所以，我心目中是這樣的：

1）輸入框中有內部值的文本。 2）當用戶點擊輸入框，框的左側滑動向內（左到右），因此它現在顯示：

名稱[輸入框]

3）如果用戶點擊了在沒有輸入任何內容的情況下，它會在Box區域內滑回到原來的位置。

我想這樣做這樣的：

具有定位在輸入框後面的文本，點擊數動畫框的大小，然後消失在位置的文本。但是，我的Mootools知識非常糟糕，也許像這樣（作爲一個起點）？

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

然後應用，要點擊數，但它不工作：/

2012-10-14 Alias

我用tween代替Fx。我沒有在輸入字段上做這個效果，而是在標籤上做了。在意見反饋後

2012-10-14 17:46:59 MiniGod

雖然這就是我正在尋找的，反正是有保留的地方是盒子的右側，並得到它，因此尺寸被縮小從左手大小？ http://www.bigdotmedia.co.uk/get-in-touch/像這樣，但這已經完成與jQuery ... – Alias

@Alias它現在很快變得有點雜亂。但這基本上就是你給出的鏈接。標籤的寬度是'50px'，因此'300px'到'250px'補間... – MiniGod

@Alias我的編輯更接近鏈接，而不僅僅是「保留盒子右側的位置」。爲了簡單地保持右側，您可以保留第一個'fiddle'，並且同時減小'input'的'width'。（即，減少'input'的'width'與增加'label'的'width'相同的量） – MiniGod

回答