Question

我正在尝试构建一个导航滑块，就像在导航链接下滑动的箭头一样。我想将它设置为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'
            });
        });
});

我在想我可以像下面这样创建一个var，它计算我要移动到中心的div的宽度。但我不知道如何编写动画部分的代码。

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

Answer 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/

Jquery：动画到另一个对象的中心

1 个答案: