将 div 动画到 li 元素 jquery答案

【问题标题】：animate div to li element jquery将 div 动画到 li 元素 jquery
【发布时间】：2013-11-19 19:11:37
【问题描述】：

大家好，我不明白如何将“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>

这是我的fiddle。

【问题讨论】：

一方面，如果元素有父元素，则只能使用父元素定位。您的活动选项卡 div 在列表之外，因此该列表不是 div 的父级。从那里开始。

标签： jquery html css animation jquery-animate

【解决方案1】：

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

这行得通。看看我的编辑。您必须使用 $(this).position().top + $(this).height()/2 而不是 parent.height() 才能使箭头移动。

玩得开心！

【讨论】：

【解决方案2】：

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

这将完成工作：

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

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

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

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

【讨论】：

不错！计算当然更准确！但是，正如您所说，如果他添加一个 li，他必须更新 js 代码。这不烦人吗？我希望我的代码在任何情况下都能正常工作。
非常感谢你们！是的，凯文的决定更适合我，而且效果很好。但是你的回答也很有帮助。再次感谢！
@KevinCittadini 理论上，没有。添加另一个 li 不会对这段代码造成问题，只要所有 li 的高度相同