Как сделать условие для input?

Question

[b_efimenko]

В общем по наведениию на блок он в начале 20px, он увеличивается до 400px, соответственно там стает видна форма.
При уходе курсора с этого блока он должен обратно сплюснутся, но только в том случае если на форме нету фокуса или там ничего не написано

$('.input-wraper').hover(function(){
        
            
        $('.input-wraper').animate({
            'width':'400px'
        },{duration:500})
    },
    function(){
      if ($('.input-wraper input').focus() && $('.input-wraper input').val() !== '') {$('.input-wraper').css('width','400px')}
        else{
          $('.input-wraper').animate({
            'width':'20px'
        },{duration:500})
        }
      
    })

<div class="input-wraper">
									
									<form>
										<input type="text" placeholder="Найти статью в блоге">
									</form>
								</div>

Но не работает условие с фокусом, как быть?

Comments

[b_efimenko]

прошу прощения, ошибка была в условии, рассеянный.

Answer 1

[Александр Цымбал]

а почему не сделать это с помощью CSS? c focus в jquery проблемы. Не помню какие, но что-то тоже пол дня, помню, нагугливал, так ничего путевого не нагуглил.

input {width: 20px;}
input:hover, input:focus {width: 40px;}

Или вам важна поддержка старых браузеров? Думаю, ей можно пожертвовать ради упрощения кода в несколько раз.

Answer 2

[Михаил Баженов]

ща будет:)

codepen.io/anon/pen/mlLwH

Вот держи