Javascript JQuery，保留内部<；部门>；容器动画的原始位置<；部门>；_Javascript_Jquery_Html_Css

Javascript JQuery，保留内部<；部门>；容器动画的原始位置<；部门>；

javascript jquery html css

Javascript JQuery，保留内部<；部门>；容器动画的原始位置<；部门>；,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在建立一个小网站，我对jQuery动画有一个问题，基本上，我在一个圆（另一个div）内放置了一个小文本（一个字符div），我希望当用户将鼠标悬停在它上面时，它会增长，同时将内部div（文本）保持在原始位置，当mouseleave（）事件发生时，圆会收缩回原始大小。增长/收缩部分工作得很好，问题在于内部文本在mouseenter（）上改变了位置这是HTML <body> <div class="steps"> <div id="one" clas

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

“步骤”用作容器，“编号”实际圆圈！这里有一个指向这个问题中间部分的链接：

谢谢大家!

编辑：实际上，闪烁只发生在Chrome上，CSS3的例子可以在IE和FireFox上正常工作，也许它与webkit有关

如果您给

#num text

一个高度，您可以使用已经在其上的绝对位置将其垂直对齐到中心：

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

请看这里的小提琴：

顺便说一句，使用CSS3可能也能达到同样的效果，但这可能与较旧的浏览器不向后兼容。

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

.circle{
位置：相对；//设置位置，不需要，但例如
顶部：100px；
左：100px；//宽度和高度
宽度：100px；
高度：100px；
display:table；//使用表格单元格显示居中的表格
背景颜色：蓝色；
边界半径：50%；//做一个圆！
-webkit转换：所有0.5s；//转换
-moz转换：所有0.5s；
-ms转换：所有0.5s；
-o型过渡：均为0.5s；
过渡：均为0.5s；
}
.圆圈：悬停{
左边距：-10px；//悬停时，我们将增加高度和宽度
页边距顶部：-10px；//我们还将页边距设置为-以使其保持在同一点上，+20的高度和宽度表示页边距为-10
宽度：120px；
高度：120px；
}
.圆圈p{
显示：表格单元格；//显示表格单元格
垂直对齐：中间；/在中间放置文字！
文本对齐：居中；
字号：2em；
颜色：白色；
}

小提琴

一个快速（但不稳定）的修复方法是同时设置

#num text

的动画：

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

JSFiddle：

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

编辑：哎哟，链接到错误的JSFIDLE。

效果很好，谢谢，但是当动画发生时，“1”周围仍有一些闪烁，是否仍有避免这种情况的方法？嗯，是的，有点闪烁。我还尝试了另一种解决方案，jQuery将#num文本设置为动画，但也会闪烁。您可能需要考虑稍微更改HTML结构。将数字从父div中移出并绝对定位所有内容。如果您感兴趣，这里是使用jQuery定位数字的版本：我尝试了您所说的一个版本，更改了HTML结构，并将“1”覆盖在圆圈上（使用z-index），但有一个问题是，悬停在“1”上会停止动画。这里唯一的问题是，它对旧浏览器（以及所有低于10的IE）的向后兼容性不是很好。愚蠢的我，没有注意到CSS上的转换速度！谢谢你，我想这样就可以了，但我还是更喜欢jQuery。对于这种闪烁，似乎什么都做不到，它在IE10上确实有效，讽刺的是？没有闪烁的IE？？谢谢，我试过这个，但我希望“1”保持原样，不要动。