1

基本的に、そのようなものが欲しい

TEXT_____________________[img]


'TEXT' is actual label for example `<div>LABEL</div>`

'_____________' is a `hr` element

'[img]' is a small image, for example a magnifying glass

望ましいアニメーションは、ユーザーが [img] をクリックすると、検索入力ボックスが遅くなり、画像の左側に表示されることです。たとえば、クリックした後です。

TEXT________ [search-box] [img]

[img] は右に浮いた同じ場所にある必要があります。唯一の変更点は、hr要素全体が同じ幅である必要がありますが、縮小されることです。

私はいくつかのプロトタイプを持っていますが、それは少しハッキーで醜いです。誰かが良い解決策を提案できますか?

編集: http://jsfiddle.net/BTFEd/2/

ええ、そのフィドルのようなものですが、画像アイコンは右端にとどまり、検索ボックスの可視性に応じて hr が縮小または拡大します。

4

1 に答える 1

1

animateを使用しますが、ビフォアを非表示hrにします:

$("#s-box").hide();
$("#search-icon").click( function(){
    $("#s-box").animate({ width: 'toggle'});
    $(".my-hr").animate({ width: 'toggle'});
});
于 2013-01-31T22:08:16.300 に答える