JQuery动画边框不移动div

Question

我想通过首先在 mouseenter 上使其边框变厚 5px，然后在 mouseleave 上将边框减小 5px 来为 div 设置动画，棘手的部分是我不希望 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，而margin没有设置，所以是0px。 div 在 mouseenter 上的动画效果很好，我可以使边框更厚而 div 不会实际移出位置，但是当触发 mouseleave 时，div 将首先将自身重新定位到该位置，就好像从未调用过“margin -5px”一样，然后慢慢减小它的边界，似乎实际上并没有调用“magin：'0px'”。

我不确定我的描述是否有道理，如果需要，我可以制作一个原型。

Answer 1

我没有阅读整个代码，但我认为有更好的方法来做你想做的事。

这是“大纲”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/ ...我认为它有效。

Answer 2

所以我终于找到了自己的答案。重申我想要的：

1. 圆形 div
2. 增加边框宽度的动画
3. 不希望 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);
    });
});

我们可以实现我们想要的。

以this fidddle 为例。

现在，另一个有待商榷的问题是：我们希望只有当鼠标实际位于 div 内的圆形元素上时才能为边框设置动画，因为如果您将鼠标悬停在不可见 div 框的角上，圆形将动画，但这不是我们想要的。稍后我将发布一个链接，说明我们如何实现这一点。

Answer 3

好的，这变得具有挑战性。

请记住，您的 div 是圆形的：

为你的每个 div 使用一个包装器（另一个 div），比它们大，将你的 div 放在包装器中（垂直和水平）作为“内联块”，然后为它们设置动画。

每个边框都必须独立动画才能正常工作（“borderLeftWidth”、“borderRightWidth”等，而不仅仅是“borderWidth”）。这是 jQuery 中一个没有很好记录的错误：http://bugs.jquery.com/ticket/7085（很难发现）。

它似乎工作：http://jsfiddle.net/y4FTf/2/

HTML

<div class="wrapper">
<div class="content">Hello World!
</div>
</div>
<div class="wrapper">
<div class="content">Foo Bar
</div>
</div>

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

Answer 4

有趣的问题...通过切换类效果更好，但仍然不是很流畅：

http://jsfiddle.net/dzTHB/13/