Question

我想要动画这个：

$("#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);

Answer 1

BIG EDIT

以下是我现在认为你要做的事情：

你有一个水平导航，你想在用户点击一个锚点时为这些元素之间的下划线或其他天赋设置动画。

如果您正在寻找，那么您需要查看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中的下划线硬编码“top”和“left”。

Answer 2

如果此代码可以帮助您，我已经理解了您的需求，

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

jQuery使用“位置”动画DIV

2 个答案: