jQuery使用“位置”动画DIV答案

【问题标题】：jQuery animate DIV using "position"jQuery使用“位置”动画DIV
【发布时间】：2011-05-02 02:43:55
【问题描述】：

我想要动画这个：

$("#movethis").position({  my: "center top",  at: "center bottom",  of: "#nav1" });

我该怎么做？

...这有点奇怪，我找不到任何例子。

///udpate：得到了解决。仍然希望执行上述操作，但这就是我得到的：

AnElement = 动态选择正确的元素

theMoverPos = $("#theMover").position().left;
goToPos = $(AnElement).position().left + ($(AnElement).width()/2);
moveTo = goToPos - theMoverPos;
moveTo2 = "+=" + moveTo;
$("#theMover").animate({ left: moveTo2}, 1000);

【问题讨论】：

标签： jquery position jquery-animate

【解决方案1】：

大编辑

这就是我现在认为你正在尝试做的事情：

您有一个水平导航，并且您希望在用户单击锚点时在元素之间设置下划线或其他样式。

如果这就是您要查找的内容，请查看jQuery animate call。

这是我制作的示例页面，它比您制作的更简单（而不是 += 用于动画，它设置绝对值并在状态之间设置动画）：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript">
$(function() {
    var startTop = $("#nav1").outerHeight() + $("#nav1").position().top;
    var startLeft = $("#nav1").position().left;
    $("#underline").attr("style","top: " + startTop + "px; left: " + startLeft + "px;");

    $(".navButton").click(function() {
        var newPos = $(this).position().left;
        $("#underline").animate({left: newPos},"slow");
    });
});
</script>
<style type="text/css">
.navButton {
    float: left;
    clear: none;
    margin-right: 10px;
    cursor: pointer;
}
#underline {
    height: 1px;
    border: 1px solid red;
    width: 30px;
    position: absolute;
}
</style>
</head>
<body>
<div class="navButton" id="nav1">nav 1</div>
<div id="underline"></div>
<div class="navButton" id="nav2">nav 2</div>
<div class="navButton" id="nav3">nav 3</div>
</body>
</html>

手动设置'style'属性似乎是必要的，因为如果没有设置，第一个动画将来自屏幕的左上角。这可能是一个 jQuery 错误，animate() 似乎在样式表或 element.style 中列出的值与新参数之间进行动画处理，而不是在计算样式和新参数之间进行动画处理。设置 element.style 是我能想到的最好方法，而不是硬编码 CSS 中的下划线的“顶部”和“左侧”。

【讨论】：

我有一个动态生成的导航（id=nav1、nav2、nav3 等）并转到页面锚点。我想要一条线（在它们下面）在这些链接之间设置动画以显示当前页面。我已经完成了所有后勤工作，接受如何将此 DIV（下划线）滑动到这些动态位置。如果我可以使用上面的代码（我用来初始化位置）来定位它会非常容易。我只是不知道如何为这种奇怪的东西制作动画。
使用位置：绝对；在下划线的样式中（我使用了一个 div），然后我的上述方法起作用（减去一个编辑，见上文）。不过，您需要在它周围包装一个方法，当您到达底部时，它会以动画方式返回到堆栈顶部。
听起来你把事情复杂化了。你能给我们看完整的例子吗？
是的，看起来我说得太早了。适用于 Firefox 3.6，但不适用于 chrome 或 IE。我将不得不再摆弄它，但我要去做我的另一份工作了。 @Dave 您能否发布您的导航在 HTML 中的样子，以便我们更好地了解您的导航结构？
很好，至少你现在有一些东西。我将添加我早上想出的内容，并稍微清理一下我的帖子。您对目前的方法有什么不满？我觉得我仍然没有完全理解你的语法或你想要做什么。

【解决方案2】：

如果这段代码对你有帮助，我已经明白你想要什么了，

var temp=$("#nav1").width();
var temp2=$("#movethis").width();
temp=50-((temp/temp2)*100);
temp="+="+temp+"%";
$("#movethis").animate({  left: temp});

【讨论】：