jQuery - $(this).animate not working

http://jsfiddle.net/SubrS/2/

I have no idea why this isn't working, surely it cannot be because of the inline styling,its only there until I get the animation works then I'll put it into a stylesheet!

Hope someone can help, I have this working on loads of other sites!

Thanks in advance.

Regards,
Joe.

It's working fine actually. It's just not working how you expect. You see when you increase the padding on one link, it increases the width of the parent and it's parent, etc. on up to the fixed positioned element. The other links also grow to the new width of their ancestors.

Why do you have a <div> as a parent of each link? I suggest you remove them and move the background color from the <li>s to the <a>s.

Ah ok, I see how it's working now, so it's the position:fixed; that could be causing this issue? The reason I ask is because I've used this same technique on other websites, and they've worked as intended.

http://jsfiddle.net/SubrS/19/

The above code is how you explained, but the same problem exists?

Thanks for your help of understanding the problem mate!

You're welcome.


Not quite. It's the shrink-wrapping nature of the fixed positioning that's causing it.


The background color is still on the <li>s. However, you'll need to make another change as well. I suggest you give the <a>s a right margin and then decrease it when you increase the padding.

I see - wow, I've done a million sites and not once have I come across this issue before! Shows that no matter how many years you've developed websites, you can always be surprised by something so .. simple in the end!