Как реализовать форму поиска?

Question

[sedoyky4er]

Дорогие друзья!

Начал изучать jQuery, возникла необходимость создать форму поиска. Допустим есть кнопка, при нажатии на которую input выезжает и становиться в фокусе, если нажимаю кнопку еще раз или форма теряет фокус, она успешно уезжает обратно.

Реализовал, при нажатии на кнопку выезжает/заезжает input, но вот как только фокус пропадает нечего не происходит, попробовал реализовать разными способами, не выходит и вот уже отчаялся и пришел к вам, подскажите, что не так?!

$('.search_btn').click(
		function(){
			$('.search').animate({width:'toggle'},350).focus();

			if($('.search').is('focus') == false){

				$('.search').blur();
			}
		}
	);

<nav class="nav">
	<form>	
		<input type="search" class="search" />
	</form>
	<button class="search_btn"></button>
</nav>

.nav{
			width:1000px;
			position: relative;
			margin:0 auto;
		}

		.search{
			width:100%;
			height: 30px;
			display: none;
			float:right;
			display: none;
		}

		.search_btn{
			width:20px;
			height:20px;
			background: red;
			display: inline;
			position: absolute;
			top:5px;
			right:5px;
		}

Answer 1

[Александр Решетняк]

codepen.io/suez/pen/ogVqYW
codepen.io/MilanMilosev/pen/JdgRpB
codepen.io/912lab/pen/LsplC
codepen.io/CBeghin/pen/HeuiF

Answer 2

[Cyapa]

Если коротко:

$('.search').focusout
(
	function()
	{
		$('.search').animate({width: 'hide'}, 350);
	}
);

Но учти что в твоем коде проблемы с обработкой события клика.