JQuery动画边框没有移动div
我希望动画一个div，首先让它的边框在mouseenter上加5px，然后在mousele上减少5px的边框，棘手的部分是我不希望div看起来像是在移动（如果你只是动画边界，整个div看起来会变化，而不仅仅是边界越来越厚。 我非常接近，但我最后一部分停留在：mouseleave。 到目前为止我所拥有的是：
$("#thumbdiv").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在mouseenter上动画效果很好，我可以让边框更粗而没有div实际移动到位，但是当mouseleave被触发时，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/ …我认为它有效。
所以我终于找到了自己的答案。 重申我想要的：
- 圆形div
- 增加边框宽度的动画
- 不希望div看起来像是“移动”，只有边框应该是移动部件
我通过同时为边距和边框设置动画来实现这一点，因为如果你只是为边框设置动画，那么整个div就会移动。 但是如果你在增加边界的同时减少边距，你会得到div静止不动的错觉。
简单地说，我们有一个循环div：
#somediv { display: inline-block; height: 200px; width: 200px; border: solid 0px; vertical-align: middle; border-radius: 2000px; background-color: #ccc; margin: 0px; }
并使用JQuery函数：
$(function(){ $("#somediv").mouseover(function(){ $(this).animate({"borderLeftWidth" : "5px", "borderRightWidth" : "5px", "borderTopWidth" : "5px", "borderBottomWidth" : "5px", "marginLeft" : "-5px", "marginTop" : "-5px", "marginRight" : "-5px", "marginBottom" : "-5px" }, 300); }).mouseout(function(){ $(this).animate({"borderLeftWidth" : "0px", "borderRightWidth" : "0px", "borderTopWidth" : "0px", "borderBottomWidth" : "0px", "marginLeft" : "0px", "marginTop" : "0px", "marginRight" : "0px", "marginBottom" : "0px" }, 300); }); });
我们可以实现我们想要的。
看看这个小提琴作为例子。
现在，另一个争论的问题是：我们希望能够仅在鼠标实际位于div内的圆形元素上时为边框设置动画，因为如果将鼠标hover在不可见div框的角上，则圆圈将会生成动画，但是那不是我们想要的。 我将发布一个链接，告诉我们以后如何实现这一目标。
好吧，这变得具有挑战性。
记住你的div是循环的：
对每个div使用一个包装器（另一个div），比它们大，将包装器（垂直和水平）中的div作为“内联块”居中，然后为它们设置动画。
每个边框都必须独立动画才能正常工作（“borderLeftWidth”，“borderRightWidth”等，而不仅仅是“borderWidth”）。 这是jQuery中一个没有很好记录的错误： http ： //bugs.jquery.com/ticket/7085 （很难发现）。
它似乎工作： http ： //jsfiddle.net/y4FTf/2/
HTML
Hello World! Foo Bar
CSS
.wrapper { width: 210px; height: 210px; line-height: 210px; text-align: center; padding: 0px; } .content { display: inline-block; height: 200px; width: 200px; border: solid 0px; vertical-align: middle; border-radius: 2000px; background-color: #ccc; margin: 0px; }
使用Javascript
$(function(){ $(".content").mouseover(function(){ $(this).animate({"borderLeftWidth" : "5px", "borderRightWidth" : "5px", "borderTopWidth" : "5px", "borderBottomWidth" : "5px" }, 300); }).mouseout(function(){ $(this).animate({"borderLeftWidth" : "0px", "borderRightWidth" : "0px", "borderTopWidth" : "0px", "borderBottomWidth" : "0px" }, 300); }); });
有趣的问题……通过切换类可以更好地工作，但它仍然不是很顺利：