ul/liのjQueryアニメーション検索ボックス

Question

http://societeperrier.com/のようなナビゲーションバーを模倣する方法を教えていただけますか？ 私は多くの方法を試みましたが、無駄でした。私はhttp://thefinishedbox.com/freebies/scripts/jquery-animated-search/を検索ボックスに使用しています。 私のul/liナビゲーションバーに置いている間に。ポストスライドされた効果のためにブランクがあらかじめ残されています。 ソシエテペリエ（Societe Perrier）のように。 liアイテムは、検索ボックスをクリックすると自動的に再配置されます。

私の貧しい人の英語のために申し訳ありません、あなたの助けに感謝します。

Answer 1

ここで私がやる方法は、jsfiddleです。

$("#search").focus(function(){ 

    // animate right 100px, you can change the values after 
    $(this).animate({'width' : "200px" }, 200); 

}); 

$("#search").blur(function(){ 

    // change back after blur is fired 
    $(this).animate({'width' : "100px" }, 200); 

}); 

Answer 2

私は同じjQueryプラグインを使用し、同様の問題に直面してきました。この問題を解決するために、私はCSSからfieldsetの幅を削除し、jsファイルの 'focus'イベントに幅を適用しました。追加されるコードは以下の通りです：

$('#searchForm fieldset').animate({width: '240px'}, 300); 

「ぼかし」イベントでは、その親要素のサイズを変更する必要があります。だから私はぼかしイベントの下の行を追加しました：

$('#searchForm fieldset').animate({width: '152px'}, 300); 

お好みの幅を設定することができます。私はそれが完璧かどうかは分かりませんが、それは私のために働いていました。