1

http://societeperrier.com/のようなナビゲーション バーを模倣する方法を教えてください。私は非常に多くの方法を試しましたが、無駄です。http://thefinishedbox.com/freebies/scripts/jquery-animated-search/を検索ボックスとして使用 しています。それを ul/li ナビゲーション バーに置いたとき。スライド後の効果のために空白を事前に残します。ソシエテ ペリエでご覧の通り。検索ボックスをクリックすると、li 項目が自動的に再配置されます。

下手な英語で申し訳ありませんが、助けていただきありがとうございます。

4

2 に答える 2

2

これが私が行う方法です。これが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);

});

</p>

于 2012-04-28T15:46:59.783 に答える
1

同じjQueryプラグインを使用しましたが、同様の問題に直面しました。この問題を解決するために、css からフィールドセットの幅を削除し、js ファイルの「フォーカス」イベントに幅を適用しました。追加されたコードを以下に示します。

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

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

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

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

于 2012-07-19T06:09:00.140 に答える