Как добавить ширину ввода на .animate - PullRequest
Новая
       13

Как добавить ширину ввода на .animate

1 голос
/ 13 февраля 2012

Я хочу установить ширину автоматически на .animate({width: "auto"}, 'slow');, но это не работает? Если кто-то может помочь, я буду очень признателен.

скрипка:

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

Спасибо!

Ответы [ 2 ]

2 голосов
/ 22 июля 2014

Это работает и просто ДЕМО 

$(document).ready(function () {
$("input[type=text]").focus(function () {
    $(this).animate({
        width: "160px"
    }, 100);
});
$(this).focusout(function () {
    $("input[type=text]").animate({
        width: "130px"
    }, 100);
});});
2 голосов
/ 14 февраля 2012

Редактировать: Добавлен динамический элемент (кнопка) на размытие, чтобы вычислить ширину и сразу удалить .. Так что вам не нужно ничего менять в 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');
});

Я добавил скрытый диапазон, а затем добавил текстовое поле внутри диапазона, чтобы вычислить ширину диапазона.Затем получил externalWidth диапазона и применил его к текстовому полю при размытии.

DEMO

...