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

Question

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

小提琴：

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的outerWidth并将其应用于模糊的文本框。

DEMO

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);
});});