jquery - 異なる結果を与える画像のCSSをアニメーション化する

Question

<a>メニューと、メニューでホバーしたタグに続く小さなバーがあります。

小さなバーは画像であり、jQueryanimate関数を使用してCSSをアニメーション化しています。

私の問題は、別のブラウザや別の解像度を使用すると、小さなバーの位置が少し異なることです。

常に完璧にフィットするバーが必要です。

私のフィドルの問題は、画像を使用することです

Answer 1

項目ごとに繰り返す必要はありません。代わりに、すべての項目に対して 1 つの関数を記述できます。

$("#smallMenu a").mouseover(function(){
    var $this = $(this),
        os = $this.offset();
    $("#smallBar").clearQueue().animate({
        left: os.left,
        top: os.top + $this.height(),
        width: $this.width()
    });
});

フィドル

leftこれにより、ホバーされたリンクと同じ位置 (os.leftおよびホバーされたリンク自体のすぐ下)にバーが設定され、ページ内の位置やサイズとは関係なくos.top + $this.height()、リンクと同じ幅になります。$this.width()必要に応じて調整できます (位置と幅のピクセルを追加または取得することもできます)。