jquery - 在不隐藏 div 的情况下淡入 div 中的文本

Question

我是一名 jquery 学徒，但遇到了以下问题。我有一系列子弹，我正在使用效果进行操作。这是一个 JSfiddle带有完整代码。

以下是我要操作的 html:

<div class="bullets_container">
    <div class="box"> <div class="bullet">1</div>  </div>
    <div class="box"> <div class="bullet">2</div> </div>
    <div class="box"> <div class="bullet">3</div> </div>
</div>

我想一开始将数字隐藏在 <div> 中带有一类子弹而不隐藏实际的 <div> ，因为我正在为我的动画使用它的 css 属性。

当我点击按钮并且动画开始时，我希望 html 淡入。另外，我很难定位 html，使其完全位于圆的中心。

Answer 1

将元素符号中的数字包裹在一个跨度(或您喜欢的其他标签)中:

<div class="bullet"><span>1</span></div>

向它们添加一些 CSS(pos.relative 和 top/left/bottom/right 允许轻松调整位置):

.bullet span {
    display: none;
    position: relative;
    top: -4px;
}

并像这样编写按钮单击回调(在 span 上使用 jQuery show() 和 hide()):

$("button").on("click",function(){
    if( s==1)clearInterval(interval), s = 0;
    else startInterval();
    var blt = $(".bullet").eq(i-1),
        spn = $('span', blt);
    if( !blt.hasClass("active") ){
        blt.removeClass("inactive").addClass("active");
        spn.show(500);
    } else {
        blt.toggleClass("inactive").removeClass("active");
        spn.hide(500);
    }
});

工作 DEMO here .