JQuery动画边框不移动div

Posted 2023-05-08

【中文标题】JQuery动画边框不移动div

【英文标题】：JQuery animate border without moving div

【发布时间】：2011-09-12 22:03:48

【问题描述】：

我想通过首先在 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'”。

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

【问题讨论】：

我根本无法使用它；它只是疯了:-(

我找到了答案，我们还不能在 JQuery 中为速记值设置动画，所以边距必须是 marginTop、marginRight、marginBottom 和 marginLeft。会尽可能发布我自己的答案。

是的 :-) jsfiddle.net/25EsV

我发布的小提琴在类定义中使用速记。

【参考方案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/ ...我认为它有效。

【讨论】：

我会说这是可以接受的，但它不会 100% 起作用。因为我实际上拥有的是圆形 div。如果你为outlineStyle设置动画，它会使包含div的不可见框的轮廓更粗，所以如果你有任何边框半径，这看起来不正确，尤其是在我的div是一个圆圈的情况下。不过答案很好！

【参考方案2】：

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

圆形 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);
    );
);

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

以this fidddle 为例。

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

【参考方案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);
);
);

【讨论】：

这是一个很好的答案，我不确定这是否比为边缘设置动画更好。我会反对这一点，因为额外的部分，以及环绕内部 div 的 div 必须至少大于您想要为边框设置动画的量。将其插入有用的应用程序可能会更加困难。将其与我的答案进行比较，看看您的想法。

【参考方案4】：

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

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