Question

Hey guys for some strange reason I can’t get this to work…I just need a simple effect on hover where if the link is hovered upon, the padding-left changes to a certain pixels..

jQuery("nav li ul li").hover(function() {
     var padding = parseInt(jQuery(this).find("> a").css("paddingLeft");
         var new_padding = (padding + 5);   
     jQuery(this).find("> a").stop(true,true).animate({ paddingLeft: new_padding},200);
     }, function() { jQuery(this).find("> a").animate({ paddingLeft: padding},200);}
);

So the above I am just trying to say move the padding left to 5 more than the original and move it back to original when mouse out. The above keeps moving to the right with padding and doesn’t go back for some reason…I know I am missing something simple..

Thanks…

Answer 1

I would strong suggest you use += and -= animation capabilities in jQuery to add and remove a fixed amount from the padding. That way you can do everything a lot simpler without actually fetching the value of the padding or having to keep track of anything in variables. See http://api.jquery.com/animate/ for examples. Using this will also solve the scoping problem you have with the new_padding variable because you won’t need it any more.

Then, I don’t think the find(“> a”) is necessarily doing what you want. If you just want to find “a” tags that are children of the nav li ul li that is being hovered over, then you should just do find(“a”). That will find descendants of all the matches selectors in the first call that are “a” tags.

I think you can use something like this:

jQuery("nav li ul li").hover(
     function() {
         jQuery(this).find("a").stop(true,true).animate({paddingLeft: "+=5"},200);
     }, 
     function() { 
         jQuery(this).find("a").stop(true, true).animate({paddingLeft: "-=5"},200);
     }
);

You can see it work here in this demo of the code: http://jsfiddle.net/jfriend00/9YQaV/