JQuery，在容器 <div> 的动画上保持内部 <div> 的原始位置答案

【问题标题】：JQuery, keep inner <div> orginal position on animation of container <div>JQuery，在容器 <div> 的动画上保持内部 <div> 的原始位置
【发布时间】：2013-08-31 06:00:47
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html css

【解决方案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/

【讨论】：

这里唯一的问题是它对旧浏览器（以及所有低于 10 的 IE！）不太向后兼容
愚蠢的我，没有注意到 CSS 上的过渡速度！谢谢，我想这样就可以了，但我还是更喜欢 jQuery。
对于那种闪烁似乎无能为力，它确实适用于IE10，具有讽刺意味的是？ IE上没有闪烁... ??

【解决方案2】：

如果你给#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 可能也可以实现相同的效果，但可能无法向后兼容旧版浏览器。

【讨论】：

效果很好，谢谢，但是在动画发生时，'1' 周围仍有一些闪烁，有什么办法可以避免这种情况吗？
嗯嗯，有一点闪烁。我还尝试了另一种解决方案，其中 jQuery 为 #num-text 设置动画，但它也会闪烁。您可能需要考虑稍微更改 HTML 结构。将数字移出它的父 div 并绝对定位所有内容。
如果你有兴趣，这里使用jQuery定位数字的版本：jsfiddle.net/hZSKA/4
我按照你说的尝试了一个版本，改变了 HTML 结构，并在圆圈上覆盖了“1”（使用 z-index），但是有一个问题是悬停在“1”上会停止动画。

【解决方案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。

【讨论】：

谢谢，试过这个，但我希望'1'保持原样，不要移动。