Развернуть текстовую форму по наведению с JQuery

У меня есть ввод текста начальной загрузки и с JQuery Я хотел бы:Развернуть текстовую форму по наведению с JQuery

Expand textform на парении и убираются при наведении курсора мыши вне. ✓ (already done in this jsfiddle)
Когда textform фокусируется/выбран (точка ввода находится внутри текстового поля), форма раскрывается и не убирается от курсора парить вне. ✗ (быть compelted)

Html

<div class="col-md-3 col-sm-3"> 
    <div class="input-group"> 
    <input class="form-control" placeholder="Search"></input> 
    </div> 
</div>

Javascript

$(function(){ 
    var form = $('.input-group'); 
    form.mouseenter(function(){ 
    form.animate({ "width": "+=" + form.width() * 1.4}, "slow"); 
    }).mouseout(function(){ 
    form.animate({ "width": '100%'}, "slow"); 
    }); 
});

источник

2013-12-10 Jeremy Lynch

решаемые http://jsfiddle.net/mY8uU/6/

$(function(){ 
    var form = $('.input-group'), w = form.width(); 
    form.mouseenter(function(){ 
    form.animate({'width': '100%'}, 'slow'); 
    }).mouseout(function(){   
    if(!$('.form-control:focus').length) form.animate({'width': w}, 'slow'); 
    }) 
    $('.form-control').on('blur', function(){ 
    form.animate({'width': w}, 'slow'); 
    }); 
});

источник

2013-12-10 13:00:39 rafaelcastrocouto

jsfiddle, похоже, не работает –

Я вижу ошибку ... исправляю ее ... дайте минутку ... сделанный – rafaelcastrocouto

@ Решение Neto также работает, но это более кратким, поэтому правильный ответ идет вам. Thankyou –

это один работал для меня:

$(function(){ 
    var form = $('.input-group'); 
    form.mouseenter(function(){ 
    form.animate({ "width": form.width() * 1.8}, "slow"); 
    }).mouseout(function(){ 
    form.animate({ "width": form.width()/1.8}, "slow"); 
    }); 
});

jsfiddle: http://jsfiddle.net/mY8uU/2/

источник

2013-12-10 12:55:55

Это будет работать в этом конкретном случае, но если по какой-либо причине ширина будет дополнительно изменена, деление на 1,8 может быть не правильным вычислением. Просто хедз-ап :) (это не так в малейшей степени, так что не принимайте это как критику lol) –

спасибо @RUJordan, но я надеюсь, что он достаточно креативен, чтобы сделать остальную работу сам по себе :) просто пытаюсь дать некоторые «рабочие входы» :) –

Это не делает то, что мне нужно. Когда текстовая форма выбрана (т. Е. Точка ввода находится внутри текстового поля), зависание не должно работать, но когда не выбрано, работает hoverout. –

попробовать это

$(function(){ 
    var form = $('.input-group'); 
    var start_width = form.width(); 

    form.find('#input-target').mouseenter(function(){ 
    form.animate({ "width": "+=" + start_width * 1.4}, "slow"); 
    }).mouseout(function(){ 
    form.animate({ "width": start_width+'px'}, "slow"); 
    }).focus(function(){ 
     $(this).unbind('mouseout'); 
     $(this).unbind('mouseenter'); 
    }).blur(function(){ 
     form.animate({ "width": start_width+'px'}, "slow"); 
     $(this).mouseout(function(){ 
     form.animate({ "width": start_width+'px'}, "slow"); 
     }).mouseenter(function(){ 
    form.animate({ "width": "+=" + start_width * 1.4}, "slow"); 
     }); 
    }); 
});

видеть на этом http://jsfiddle.net/ZQ3nZ/

источник

2013-12-10 13:08:28 Neto

Это исключительно близко к тому, что я искал, но есть одна ошибка. Когда выбранный hoverin все еще работает, делая вход более длинным и длинным –

Если вы удалите '+ 'px'', я думаю, что он должен работать –

О, и вам может понадобиться отменить() центр мыши, в противном случае он будет продолжать расти, пока он теряет фокус. –

Вы всегда можете использовать некоторые CSS3:

input#search { 
    transition: width .5s; 
    -webkit-transition: width .5s; 
} 
input#search:hover, input#search:focus { width:300px; }

источник

2013-12-10 13:24:03 Kippie

Не может быть CSS3?

В этом случае можно обойтись без Javascript и использовать

.textbox{ 
    width: 200px; 
    transition: width 1S; 
} 

.textbox:hover 
{ 
    width:250px; 
    transition: width 1S; 
}

Это просто пример, но вы можете изменить его по своему вкусу.

источник

2013-12-10 13:24:32 PatrikS

Развернуть текстовую форму по наведению с JQuery

ответ

Смежные вопросы