1

我正在建立一个小型网站，并且遇到了 jQuery 动画问题，基本上我在一个圆圈（另一个 div）内放置了一个小文本（一个字符 div），我希望它在用户悬停时增长在将内部 div（文本）保持在原始位置的同时，圆圈将在 mouseleave() 事件时收缩回原始大小。增长/缩小部分工作得很好，问题在于内部文本在 mouseenter() 上改变了位置。

这是HTML

 <body>
 <div class="steps">
    <div id="one" class="number">
        <div id="num-text">
            <p><strong>1</strong>
            </p>
        </div>
    </div>
 </div>
 </body>

用“步骤”作为容器，“编号”实际的圆圈！这是这个问题的 JSFiddle 的链接：http: //jsfiddle.net/Rockr90/hZSKA/

谢谢 ！

编辑：实际上，闪烁只发生在 Chrome 上，CSS3 的示例按预期在 IE 和 FireFox 上工作，也许它与 webkit 有关？

4

3 回答 3

1

如果你给出#num-text一个高度，你可以使用你已经拥有的绝对定位将它垂直对齐到中心：

#num-text {
    position:absolute;
    text-align:center;
    color:#eee;
    font-size:24px;
    width:100%;
    height: 24px;
    top:50%; margin-top:-12px; }

在这里看小提琴：http: //jsfiddle.net/hZSKA/1/

附带说明一下，使用 CSS3 可能也可以实现相同的效果，但可能无法向后兼容旧版浏览器。

于 2013-08-30T15:29:33.013 回答
1

这只能通过 CSS 实现！你不需要 jQuery，我将用这个例子解释如何做到这一点。我已经为圆圈使用了显示表格，以便我们可以使用显示表格单元格来显示完美居中的文本

HTML

<div class="circle">
    <p>1</p>
</div>

CSS

.circle {
    position:relative; //set up a position, not needed, but for example
    top:100px;
    left:100px; // width and height
    width:100px;
    height:100px;
    display:table; // display table for centered <p> with table-cell
    background-color:blue;
    border-radius:50%; // make it a circle!
    -webkit-transition: all 0.5s; // transition
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.circle:hover {
    margin-left:-10px; // on hover we will increase the height and width
    margin-top:-10px; // we will also set the margin to - to make it stay on the same spot, +20 in height and width means -10 in margin
    width:120px;
    height:120px;
}

.circle p {
    display:table-cell; // display table-cell magic
    vertical-align:middle; // put the text in the middle!
    text-align:center;
    font-size:2em;
    color:white;
}

小提琴

http://jsfiddle.net/n6D46/

于 2013-08-30T15:35:52.330 回答
1

一个快速（但粗暴和翻滚）的修复方法是动画#num-text：

     function () {
        $(this).animate({
            height: '-=10px',
            bottom: '-=5px',
            width: '-=10px'
        }, 50);
        $('#num-text').animate({'top': '-6px'}, 50)
    });
});

JSFiddle：http: //jsfiddle.net/hZSKA/5/

虽然我相信会有更好的答案。

编辑：哎呀，链接到错误的 JSFiddle。

于 2013-08-30T15:37:57.407 回答