0

ナビゲーション リンクの下をスライドする矢印のようなナビゲーション スライダーを作成しようとしています。divの中心にアニメーション化したいと思います。

これは私のナビコードです：

<nav>

        <ul class="tabs">
            <li id="tab1"><a href="#">Cursussen</a></li>
            <li id="tab2"><a href="#">Resultaten</a></li>
            <li id="tab3"><a href="#">Inbox</a></li>
            <li id="tab4"><a href="#">Profiel</a></li>
            <li id="tab5"><a href="#">Aanbod</a></li>
        </ul>

        <a id='slider'><img src="img/arrow.png"></a>

</nav>

そして、これはアニメーション化に使用する jquery です。

$(function(){
        $('li#tab1').click(function(evt) {
            evt.preventDefault();
            $('#slider').animate({
                left : '32'
            });
        });
});

中央に移動したいdivの幅を計算する次のような変数を作成できると考えていました。しかし、アニメーション部分のコードの書き方がよくわかりません。

var w = '$(#slider).parent().width()'/2
4

1 に答える 1

1

このjsフィドルを試してみてください：

http://jsfiddle.net/Q4efa/2/

特に、私は次の方法を使用しました。

$('ul.tabs li').click(function(event){

    event.preventDefault();

    var ulOffsetLeft = $('ul.tabs').offset().left;
    var currentOffset = $(this).offset().left;

    var delta = currentOffset - ulOffsetLeft;

    $('#slider').clearQueue().animate({'margin-left': delta});

});​

更新：ここで、この新しいフィドルに自動パディング計算を追加しました：

http://jsfiddle.net/Vt2dv/8/

于 2012-07-02T11:37:24.230 に答える