动画div到li元素jquery

Question

各位大家好，我不明白我怎么能将“div”动画为“li”元素我有水平列表，我需要动画我的箭头点击元素。

<ul class="tabs-titles">
    <li><a href="#tab-1">best <br/> gifts</a></li>
    <li><a href="#tab-2">best <br/> gifts</a></li>
    <li><a href="#tab-3">best <br/> for gifts</a></li>
    <li><a href="#tab-4">best <br/> gifts</a></li>
    <li><a href="#tab-5">best <br/> gifts</a></li>
    <li><a href="#tab-6">best <br/> gifts <br/> gifts</a></li>
</ul>
<div class="active-tab"></div>

这是我的小提琴 。

Answer 1

http://jsfiddle.net/9E2WQ/5/

这有效。 看看我的编辑。 你必须使用$(this).position().top + $(this).height()/2而不是parent.height()来移动箭头。

玩得开心！

Answer 2

我看到@Kevin已经发布了一个非常好的答案，我建议你使用他的，但是，为了完整性，我会发布另一种方法。 请注意，它并不完美，需要进行一些微调以适应任何最终情况，但它会起作用。

这将完成工作：

http://jsfiddle.net/9E2WQ/9/

通过使用基本高度和选项卡的编号，您可以确定每个链接的正确高度。 您唯一需要注意的是：

var dist = 22 + (num-1)*($(this).height()+(parseInt($(this).css("marginTop"))*2));

这要求所有链接都具有相同的高度。 如果您希望任何链接具有不同的高度，则需要使用不同的方法来计算距离div顶部的距离。