JQuery动画边框没有移动div

我想通过首先使鼠标的边框变厚5px,然后将鼠标左边的边框减少5px,棘手的部分是我不希望div看起来像移动(如果你只是动画边框,整个div看起来就会发生变化,而不仅仅是越界越薄越薄).我非常接近,但我被困在最后一部分：mouseleave.我到目前为止是：

$("#thumbdiv<%=s.id.to_s%>").bind({
            mouseenter: function(){
                $(this).animate({
                    borderRightWidth: "25px",borderTopWidth: "25px",borderLeftWidth: "25px",borderBottomWidth: "25px",margin: "-5px"
                },500);
            },mouseleave: function(){

                $(this).animate({
                    borderRightWidth: "20px",borderTopWidth: "20px",borderLeftWidth: "20px",borderBottomWidth: "20px",margin: "0px"
                },500);
            }
        });

我将边框设置为20px以前的位置,并且边距未设置,因此为0px.这个div动画在鼠标器上很好,我可以使边框更粗,而不会使div实际移动,但是当鼠标被触发时,div将首先重新定位到该位置,就像“margin -5px”从未被调用,然后缓慢降低它的边界,看起来像“magin：’0px’”实际上没有被调用.

我不知道我的描述是否有意义,如果需要,我可以提出一个原型.

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");
});