jQuery 左右动画

Question

When using jQuery.animate(width: value) it animates the width from left to right. So if you have a 10px div and you want to animate the width to be 100px. It will animate for the left to the right making the div bigger.

What I need is it to animate both left and right evenly. Perhaps my example will help.

Example here: (Navigation at the top) http://www.search-this.com/examples/eberl-reboot/index2.html

I want the animation to not just go left to right, but start in the middle and fill left and right. Make sense?

There are probably other ways to explain this, perhaps some better, but do you get what I need?

Thanks

Answer 1

Try this out, it should do what you want: http://jsfiddle.net/bZAsp/

It does get a little funky if you spam the animate button, but that's an exercise left to the reader to fix:)

Answer 2

You need to animate the left position as well, taking into account the delta change in width:

http://jsfiddle.net/ZfvBK/3/

hope that helps

Answer 3

Try this. But you have to calcualte these values dynamically based on how much width you want to animate.

$(someElement).animate({ "margin-left": "+=50", "width": 200});