如何在 .animate 上添加输入宽度

Question

我想在 .animate({width: "auto"}, 'slow'); 上设置 width auto，但这不起作用？ 如果有人可以提供帮助，我将非常感激。

小提琴：

http://jsfiddle.net/DCjYA/327/

谢谢你 ！

Answer 1

编辑：
在模糊上添加了一个动态元素（按钮）来计算宽度并立即删除。所以您不需要更改 html 中的任何内容。

DEMO

var $getWidth = $('#getTextWidth');

$('input[type=text]')
.focus(function() {
    var $this = $(this);
    if ($this.val().length > 22) {
        //$(this).data('default', $(this).data('default') || $(this).width());
        $this.stop().animate({width: 370}, 'slow');
        $this.parent().addClass('cooling');
    }
})
.blur(function() { /* lookup the original width */
    var $this = $(this);

    var textWidth = $('<input type="button" />')
        .appendTo('body')
        .attr({'id': 'tmpSpan'})
        .css({display: 'none'})
        .val($this.val()).outerWidth();
    $('#tmpSpan').remove();
    $this.stop().animate({width: textWidth + 'px'},'fast');
    $this.parent().removeClass('cooling');
});

我添加了一个隐藏的跨度，然后在span 来计算跨度的宽度。然后获取跨度的外部宽度并将其应用于模糊的文本框。

演示

Answer 2

这是有效的及其简单的 DEMO

$(document).ready(function () {
$("input[type=text]").focus(function () {
    $(this).animate({
        width: "160px"
    }, 100);
});
$(this).focusout(function () {
    $("input[type=text]").animate({
        width: "130px"
    }, 100);
});});