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

回答