ansaurus

Question

Answer 1

+1 A:

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"&gt;&lt;/script&gt; 
<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.

Benn 2010-10-28 21:01:37

I have a navigation that is dynamically generated (id=nav1,nav2,nav3,etc.) and goes to page anchors.I want a line (underneath them) to animate between these links to show current page. I have all the logistics worked out accept how to slide this DIV (an underline) to these dynamic locations. If I could use the above code (which I used to initialize the position) to position it'd be super easy. I just don't know how to animate such an odd thing.

Dave 2010-10-28 21:22:27

use position: absolute; in the styling of the underline (I used a div) and then my above method works (minus one edit, see above). You'll want to wrap a method around it that animates back to the top of the stack once you've reached bottom, though.

Benn 2010-10-28 21:40:02

sounds like you are complicating things. could you show us the full example?

sunn0 2010-10-28 21:48:15

yes, it also looks like i spoke too soon. Works in firefox 3.6, but not chrome or IE. I'll have to fiddle with it some more, but I'm off to my other job. @Dave could you post what your nav looks like in HTML so we could get a better idea of your nav structure?

Benn 2010-10-28 21:52:06

got it working with your idea, see question for code.

Dave 2010-10-28 22:05:05

Nice, at least you have something for now. I'm going to add what I came up with in the morning, as well as clean up my post a bit. What's your dissatisfaction with your current method? I feel I'm still not totally understanding your syntax or what you're trying to do.

Benn 2010-10-29 06:15:14

Answer 2

A:

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});

pahnin 2010-10-28 23:55:09

ansaurus

tags:

views:

answers:

jQuery animate DIV using "position"

related questions