JQuery animate border without moving div

Question

I want to animate a div by first making it\'s border thicker by 5px on mouseenter, then decreasing the border by 5px on mouseleave, the tricky part is that I don\'t want the

Answer 1

I didn't read the whole code, but I think there's a better aproach to do what you want.

It's the "outline" css property.

As the spec says: "...does not influence the position or size of the box... ...does not cause reflow or overflow..."

http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines

The code would be something like this:

jQuery(#thumbdiv<%=s.id.to_s%>").mouseenter( function() {
jQuery(this).css("outlineStyle", "solid").animate({
    'outlineWidth': '5px'
}, 500);
}).mouseout( function() {
jQuery(this).animate({
    'outlineWidth': '0px'
}, 500).css("outlineStyle", "solid");
});

Note:

OK, I edited the @Nabab "Fiddle" (I didn't know about that service) and I got this: http://jsfiddle.net/EbTms/ ...I think it works.