0

CSS をいくつか書くだけで、検索アイコンをクリックすると、CSS で「transition: width 0.5 ease-in-out」を使用して展開する非常にクールな検索フォームができました。偉大な。それはうまくいきます。

ただし、ナビゲーション バーを右側の検索 div の横に配置する予定ですが、ユーザーが [検索] ボタンをクリックすると、もちろん重なります。検索を展開すると、ナビゲーション Div が自動的に右に移動する方法を誰かが知っているかどうか疑問に思っていました。また、フォームがフォーカスを失ったときに div を通常に戻す必要があります (検索バーが「イーズインアウト」機能で戻るため)。

おそらくそれを行うJQueryがいくつかあると思いますが、もしあればそれを書く方法が本当にわかりませんか?

4

1 に答える 1

1

確かにこれを助けることができるjQueryメソッドがあります。jQueryの.animate（）を使用して、遷移を処理できます。

$('#search').click(function() {
    $('#navigation').animate({width: '100px'}, 500);
}

これにより、検索要素をクリックしてその遷移を0.5秒でアニメーション化すると、ナビゲーションの幅が100ピクセルに縮小されます。

おそらく、ページの流れが途切れるのを防ぐためにCSSをいじくり回す必要がありますが、overflowプロパティを設定することでそれを簡単に行うことができます。

于 2012-04-04T14:02:04.167 に答える