1

メニューに jQuery アニメーションを使用しているため、position: absolute を使用する必要があります。各テキスト文字列間の距離を同じに保ちたいのですが、それぞれ幅が異なります。jQuery 幅関数を使用すると、結果が悪くなります。これを行うより良い方法はありますか?

$(document).ready(function () {
    $(".menuitem").css('margin-left', -80);
    var url = window.location;
    $('.menulink').filter(function () {
        return this.href == url;
    }).removeClass('menulink');
    //$(".menuitem").animate({marginLeft: "20px"}, 2000);
    var number = (".menuitem").length;
    var px = number * 40 + 60;
    $($(".menuitem").get().reverse()).each(function (i, e) {
        $(this).delay(i * 200).animate({
            left: px
        }, 1000, 'linear');
        px = px - 80;
    });
});

jsFiddle の例

4

1 に答える 1

2

絶対位置は必要ありません。(または最終的な目的を誤解している)

margin+ ディスプレイがそれを行います:

.menuitem {
    display:inline-block;
    margin:0 1em 0 0
}

http://jsfiddle.net/GCyrillus/3bM9L/1

于 2013-06-03T19:53:22.783 に答える