CODEWITHSUNDEEP
jqueryhtmlcss
Andrew Nielsen
Andrew Nielsen

Reputation: 113

Fading in the text inside a div without hiding the div

I'm a jquery apprentice and I am stuck with the following problem. I have a series of bullets which I am manipulating with effects. Here is aJSfiddle with full code.

Following is the html I am trying to manipulate:

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

I want to initially hide the numbers inside the <div>'s with a class of bullet without hiding the actual <div>, since I am using its css attributes for my animation.

When I click on the button and the animation starts, I want the html to fade in. Also, I am having a hard time positioning the html so that it is perfectly center with the circle.

Upvotes: 4

Views: 282

Answers (3)

T J
T J

Reputation: 43156

As others already pointed out (The site went read only while I was writing this yesterday), you should wrap the text inside <span> elements, and use jQuery fadeIn() and fadeOut() methods for animating it's visibility.

I modified you code to something which I believe to be more readable, and tweaked the CSS to center align the text:

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>

Upvotes: 0

Amin Jafari
Amin Jafari

Reputation: 7207

you can achieve what you want using data() as below: 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'));
    }



});

Upvotes: 1

Martin Ernst
Martin Ernst

Reputation: 3269

Wrap the numbers in the bullets in a span (or another tag you like):

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

add some CSS to them (pos. relative and top/left/bottom/right allows easy position adjustment):

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

and write the button-click-callback like so (using jQuery show() and hide() on spans):

$("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);
    }
});

Working DEMO here.

Upvotes: 1

Related Questions