淡入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（位置相对和上/左/下/右允许轻松调整位置）：

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

并像这样编写按钮单击回调（在跨度上使用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。

Answer 2

您可以使用data()获得所需内容，如下所示： DEMO

var $bullet = $(".bullet"),
    bulletLength = $bullet.length,
    i = 1,
    s =0; 

function StartInverval(){
    interval =  setInterval(function(){

            s=1;
            $bullet.removeClass("shine").eq(i).addClass("shine");
            if( i < bulletLength ){
                i++;            
            } else {
                i = 0;
            }

        },100);

}
StartInverval();


$("button").on("click",function(){

    if( s==1){
        clearInterval(interval)
        s=0;



    } else {
        StartInverval();
    }

    if( !$(".bullet").eq(i-1).hasClass("active") ){
        $(".bullet").eq(i-1).removeClass("inactive").addClass("active").data('number',$(".bullet").eq(i-1).html()).html('');
    } else {
        $(".bullet").eq(i-1).toggleClass("inactive").removeClass("active").html($(".bullet").eq(i-1).data('number'));
    }



});

Answer 3

正如其他人已经指出的那样（该网站在我昨天写这篇文章时只读了），你应该将文本包装在<span>元素中，并使用jQuery fadeIn()和fadeOut()方法可以让它具有动画效果。

我将代码修改为我认为更易于阅读的内容，并调整了CSS以使文本居中对齐：

＆＃13;

＆＃13;

var $bullets = $(".bullet"),
  bullets = $bullets.length,
  interval = null;

function StartInverval() {
  interval = setInterval(function() {
    var $active = $bullets.filter(".shine"),
      currentIndex = $bullets.index($active),
      $next = (currentIndex >= bullets) ? $bullets.eq(0) : $bullets.eq(++currentIndex);
    $active.removeClass("shine");
    $next.addClass("shine");
  }, 100);

}

$("button").on("click", function() {
  if (interval) {
    clearInterval(interval);
    interval = null;
    $(".shine").addClass("active").find(".text").fadeIn();
  } else {
    $(".active").removeClass("active").find(".text").fadeOut();
    StartInverval();
  }
});
StartInverval();

＆＃13;

body {
  background: #767676;
}
button {
  position: absolute;
  top: 10%;
}
.bullets_container {
  position: absolute;
  top: 40%;
  left: 30%;
}
.box {
  float: left;
  width: 50px;
  height: 50px;
}
.bullet {
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0.3;
  text-align: center;
  background: white;
}
.bullet.shine {
  opacity: 1;
}
.bullet.active {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 2px solid white;
  margin: -6px;
  background: transparent;
  transition: 1s;
}
.bullet .text {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click Me</button>
<div class="bullets_container">
  <div class="box">
    <div class="bullet shine"><span class="text">1</span>

    </div>
  </div>
  <div class="box">
    <div class="bullet"><span class="text">2</span>

    </div>
  </div>
  <div class="box">
    <div class="bullet"><span class="text">3</span>

    </div>
  </div>
  <div class="box">
    <div class="bullet"><span class="text">4</div>
    </div>
    <div class="box">
        <div class="bullet"><span class="text">5</span>

    </div>
  </div>
  <div class="box">
    <div class="bullet"><span class="text">6</span>

    </div>
  </div>
  <div class="box">
    <div class="bullet"><span class="text">7</span>

    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;