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，边距未设置，因此它是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

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

圆形divs
增加边框宽度的动画
不希望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/

JQuery动画边框没有移动div

4 个答案: