10

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

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

4

4 回答 4

7

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

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

于 2011-06-11T04:02:33.833 回答
6

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

  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 框的角上，圆形将动画，但是这不是我们想要的。我将发布一个链接，说明我们稍后如何实现这一点。

于 2011-06-16T01:26:02.150 回答
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);
});
});
于 2011-06-14T02:43:46.707 回答
0

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

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

于 2011-06-11T03:50:56.033 回答