[jQuery] 누르면 크기가 늘어나는 검색창

jQuery로 구현하는 눌렀을 때 크기가 늘어나는 검색창

  항상 느끼는 것이지만 웹에서 마음에 딱 드는 컨셉의 디자인을 찾기는 힘이 드는 것 같습니다. 하나하나 찾기는 어렵지 않은데, 이러한 것들이 모여 이루어지는 디자인이라는 것은 개개인의 취향에 따라 마음에 들고 안들고 하기 때문인데요.. 그래서 이번에도 크기가 늘어나는 검색창을 찾다가.. 마음에 다 안들어서 그냥 jQuery로 한번 구현해보았습니다. jQuery자체가 그렇게 어렵지가 않아서 쉽게 구현이 가능합니다. blur 이벤트와 focus 이벤트를 사용하여 구현합니다. 모습은 아래와 같습니다.

구현 모습

  위쪽 그림이 누르기 전의 모습이고, 아래쪽 그림이 눌렀을 때 크기가 늘어난 모습입니다. 공간도 적게 차지하면서 애니메이션과 함께 커지기 때문에 재미(?)도 있습니다.

코드

	
// Search box change by Readiz
$("#desktopNav input").focus(function(){
	$("#desktopNav form").animate({
			"width": "200px"
	}, 300, function() {});
});
$("#desktopNav input").blur(function(){
	$("#desktopNav form").animate({
			"width": "60px"
	}, 300, function() {});
});
$("#desktopNav form").click(function(){
	$("#desktopNav input").focus();
}); 
	

  제가 작성한 코드는 평상시에 width가 60px인 상태로 있다가, focus를 받으면 200px로 늘어나게 되는 코드입니다. click이벤트가 하나 더 있는 이유는 크롬에서 저 돋보기 모양을 눌렀을 때는 input이 포커스를 가지는 것으로 인식이 되지가 않아서 이를 방지하기 위한 코드입니다.

  animate가 부드러운 애니메이션 효과를 내는 method입니다. 그냥 width를 200, 60으로 해버리면 바로 팍팍 늘어나고 줄어들지만, animate옵션을 줌으로써 부드럽게 늘어나고 줄어드는 효과를 줄 수 있습니다.