JQuery动画边框没有移动div

Question

我想通过首先使它的边框在mouseenter上使其厚度增加5px,然后在mousele上减少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

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

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

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

看看这个小提琴作为例子.

现在,另一个争论的问题是:我们希望能够仅在鼠标实际位于div内的圆形元素上时为边框设置动画,因为如果将鼠标悬停在不可见div框的角上,圆圈将会生成动画,但是那不是我们想要的.我将发布一个链接,告诉我们以后如何实现这一目标.