Question

我正在建立一个小网站，我遇到了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>

将'steps'作为容器，'number'作为实际的圈子！这是这个问题的JSFiddle的链接：http://jsfiddle.net/Rockr90/hZSKA/

谢谢！

编辑：实际上，闪烁只发生在Chrome上，CSS3的例子可以按照预期在IE和FireFox上运行，也许它与webkit有关？

Answer 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可能会产生同样的效果，但可能无法与旧版浏览器向后兼容。

Answer 2

这仅适用于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;
}

<强> FIDDLE

http://jsfiddle.net/n6D46/

Answer 3

一个快速（但粗糙和翻滚）的修复方法也是#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。

JQuery，在容器<div> </div> </div>的动画中保留内部<div>原始位置

3 个答案: