jQuery的动画边框，而无需移动股利 [英] JQuery animate border without moving div

问题描述

我想给div设置动画效果，首先在mouseenter上将其边框加粗5px，然后在mouseleave上将其边框减小5px，棘手的部分是我不希望div看起来像是在移动(如果只是为边框设置动画效果，整个div看起来都将发生变化，而不仅仅是边框变得更粗/更细.我离得很近，但是我只能停留在最后一部分:mouseleave.到目前为止，我有:

I want to animate a div by first making it's border thicker by 5px on mouseenter, then decreasing the border by 5px on mouseleave, the tricky part is that I don't want the div to look like it's moving (if you just animate the borders, the whole div will look like it shifts, not just the border getting thicker/thinner). I'm very close, but I'm stuck on the last part: mouseleave. What I have so far is:

$("#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在mouseenter上的动画效果很好，我可以使边框变粗而不会div实际移出位置，但是当触发mouseleave时，div会首先将自身重新定位到该位置，就好像从未调用过"margin -5px" ，然后慢慢减小其边框，似乎实际上并未调用"magin:'0px'".

I set the border to be 20px somewhere before this, and the margin is not set, so it's 0px. The div animates just fine on mouseenter, I can make the border thicker without the div actually moving out of place, but when the mouseleave is triggered, the div will first relocate itself to the position as if the "margin -5px" was never called, and then decrease it's border slowly and it seems like the "magin: '0px'" isn't actually being called.

我不确定我的描述是否有意义，如果需要，我可以提出一个原型.

I'm not sure if my description makes sense, I can put up a prototype if needed.

推荐答案

所以我终于找到了自己的答案.重申我想要的内容:

So I finally found my own answer. To reiterate what I wanted:

1. 圆形div
2. 增加边框宽度的动画
3. 不希望div看起来像是在移动"，只有边框应该是移动的部分

我通过同时对边界和边框设置动画来实现这一点，因为如果仅对边框设置动画，则整个div都会移动.但是，如果您在增加边框的同时减少了页边距，则会产生div静止不动的错觉.

I achieved this by animating BOTH the margin and border at the same time, because if you just animate the border, then the whole div will shift. But if you decrease the margin at the same time as increasing the border, you get the illusion of the div standing still.

简单来说，我们有一个循环div:

Simply, we have a circular div:

#somediv {
    display: inline-block;
    height: 200px;
    width: 200px;
    border: solid 0px;
    vertical-align: middle;
    border-radius: 2000px;
    background-color: #ccc;
    margin: 0px;
}

并具有JQuery函数，例如:

And with a JQuery function like:

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

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

We can achieve what we want.

以此问题为例.

现在，另一个有待讨论的问题是:我们希望仅当鼠标实际上位于div内的圆形元素上方时才能为边框设置动画，因为如果将鼠标悬停在不可见的div框的角上，则圆会动画，但这不是我们想要的.我将在后面发布一个链接，说明如何实现此目标.

Now, another question up for debate is: We want to be able to only animate the border when the mouse is actually over the circular element inside the div, because if you mouseover the corners of the invisible div box, the circle will animate, but that's not what we want. I will post a link to how we can achieve this later.

这篇关于jQuery的动画边框，而无需移动股利的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！