我想通过首先使鼠标的边框变厚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’”实际上没有被调用.
我不知道我的描述是否有意义,如果需要,我可以提出一个原型.
解决方法
我没有阅读整个代码,但我认为有更好的方法来做你想要的.
这是“大纲”的CSS属性.
正如规范所说：“…不影响箱子的位置或尺寸… …不会引起回流或溢流…”
http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines
代码将是这样的：
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");
});
注意：
好的,我编辑了@Nabab“小提琴”(我不知道那个服务),我得到这个：http://jsfiddle.net/EbTms/ …我认为它的作品.
