淡入淡出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的跨度展（）和隐藏（））：

$("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()和​​方法来激活其可见性。

我修改你的代码，而我相信更可读的东西，并调整了CSS居中对齐文本：

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();

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; 
 
}

<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>