jQuery animate DIV using "position"_问答_开发者

开发者 https://www.devze.com 2023-01-22 06:08 出处：网络

I want animate this: $(\"#movethis\").position({开发者_运维技巧my: \"center top\",at: \"center bottom\",of: \"#nav1\" });

I want animate this:

$("#movethis").position({开发者_运维技巧  my: "center top",  at: "center bottom",  of: "#nav1" });

How do I do it?

... It's kind of an oddball one, and I can't find any examples.

///udpate: got a work around. Would still prefer to do the above but this is what I got:

AnElement = dynamically selects correct element

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

BIG EDIT

Here's what I now think you're trying to do:

you have a horizontal nav, and you want to animate an underline or other flair between the elements when the user clicks on an anchor.

If that's what you're looking for, you'll want to check out the jQuery animate call.

Here's a sample page that I whipped up which is a bit simpler than what you made (instead of += for the animation, it sets an absolute value and animates between the states):

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

Setting the 'style' attribute manually seems to be necessary since if this isn't set, the first animation will come from the top left of the screen. This might be a jQuery bug, animate() seems to animate between the values listed in the stylesheet or element.style and the new parameters, rather than between the computed styles and the new parameters. Setting element.style was the best method I could come up with instead of hardcoding your 'top' and 'left' for the underline in the CSS.

If this code can helps you , I have understood what you want ,

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