2

Как на jQuery сделать, чтобы когда нажимаешь на <input> блок плавно расширялся? Я вообще jQ не знаю, вот что смог сделать:

    $(function(){
    $('.sinp').hover(function() {
        $(this).css('width', '250px');
    });
});

Тут input'у присвоен класс .sinp. По идее осталось сделать плавно и чтобы при "отводке" (outfocus или как там) обратно возвращалось к значению в css файле.

3 ответа 3

3

JavaScript

$(function() {
    $("input").focus(function(){
        $(this).animate({ width:"500px"}, 1000);
    }).blur(function(){
        $(this).animate({ width:"250px"}, 500);
    });
});

Обратно возвращается: http://jsfiddle.net/bq2LC/1.

3

Ответ не много не подходит, так как не является кросбраузерным, но он тоже может иметь право существования:

CSS3 http://jsfiddle.net/bq2LC/3/

input {            
    width: 250px;
    -webkit-transition: width 1s leaner;
    -o-transition: width 1s leaner;
    -ms-transition: width 1s leaner;
    -moz-transition: width 1s leaner;
}
input:focus {
    width: 500px;
}
2
$('.sinp').focus(function() {
        $(this).animate({width: "250px"}, 1000);
    });
2
  • стоп. А обратно не возвращается..
    – acidernt
    28 мая 2012 в 8:50
  • а обратно это другое событие blur, jquery.page2page.ru/index.php5/… ,читайте раздел события формы
    – makregistr
    28 мая 2012 в 8:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.