Jumping in jQuery width animation

Question

I'm having trouble working out why my animation is jumping. Any ideas?

http://jsfiddle.net/9F5DK/5/

jQuery(document).ready(function() {

// Animate the single page nav
    jQuery("a#post-nav-next").hover(

          function(){ 

            jQuery("a#post-nav-next span").stop(true, true).animate({width: "toggle", opacity: "toggle"});

        }
    );
});

Answer 1

Okay I spent some time figuring this out. Normally I don't like altering the original html javascript/jquery this much and if this doesn't work for you then I apologize. Here is a JSFiddle that does what you want I think...

http://jsfiddle.net/LqHwk/1/

One nice thing about this set up is you can add as many

<div class="post-nav-next">

as you wish inside the wrapper and they will all work the same

BTW I highly recommend using the jquery plugin hoverIntent.