ツクログ

tsukulognet

tsukulognet

道産子。Reactでなまら面白いものを作りたい。

【jQuery】アニメーションしながら開閉する検索フォーム

eye catch

jQueryを使い、検索フォームを開閉式にする方法です。

DEMO

テキストエリアをフォーカスするとテキストエリアが伸び、フォーカスが外れると元に戻ります。

HTML

<form id="searchform"> <div> <input type="text" id="keyword" placeholder="Search" /> <input type="submit" id="submit" value="&#xf002;" /> </div> </form>

CSS

* { box-sizing: border-box; } body { background: #40AAEF; } #searchform { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; } #keyword, #submit { background: #0E7AC4; border: none; color: #fff; display: inline-block; line-height: 1.5em; outline: none; padding: 10px; position: absolute; } #keyword { border-radius: 20px; color: #fff; right: 0; width: 40%; } #submit { border-radius: 0 20px 20px 0; cursor: pointer; font-family: "FontAwesome"; right: 0; width: 20%; }

高さを揃える

テキストエリア#keywordと検索ボタン#submitの高さを揃えるため、以下の2行を記述しています。

display: inline-block; line-height: 1.5em;

テキストエリアの初期状態

フォーカスすると伸びるようにするため、テキストエリア#keywordの初期状態はwidth40%と短くしています。

jQuery

$(function() { var $keyword = $('#keyword'); $keyword.focus(function() { $(this).animate({ width: '80%' }, 200, 'linear'); }); $keyword.blur(function() { $(this).animate({ width: '40%' }, 200, 'linear'); }); });

focus

$keywordがフォーカスされると、$keywordwidth40%80%に変化します。これによってテキストエリアが伸びます。

$keyword.focus(function() { $(this).animate({ width: '80%' }, 200, 'linear'); });

blur

$keywordのフォーカスが外れると、$keywordwidth80%40%に変化します。これによってテキストエリアが元の長さに戻ります。

$keyword.blur(function() { $(this).animate({ width: '40%' }, 200, 'linear'); });

以上で、を終わります。

参考文献

inputのtextとsubmitの高さがズレる - Webデザイン・CSS | 【OKWAVE】