Fading out in text inside a div without hiding the div
I am a jquery learner and I am stuck with the following problem. I have a series of bullets with which I manipulate effects. Here is a JSfiddle with the complete code.
Below 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 hide the numbers inside <div>
with the bullet class first, without hiding the actual <div>
one since I am using its css attributes for my animation.
When I click the button and the animation starts, I want the html to disappear. Also, I am having a hard time positioning the html so that it is perfectly centered with the circle.
source to share
Wrap the numbers in bullets in span (or whatever tag you like):
<div class="bullet"><span>1</span></div>
add some CSS to them (pos. relative and top / left / bottom / right makes it easy to adjust position):
.bullet span {
display: none;
position: relative;
top: -4px;
}
and write a button-click callback like this (with jQuery show () and hide () in between):
$("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);
}
});
We work DEMO here .
source to share
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'));
}
});
source to share
As others have already pointed out (the site was read only at the time when I wrote this yesterday), you have to wrap the text within the elements <span>
and use jQuery methods fadeIn()
and fadeOut()
to animate its visibility.
I changed the code to what I think is 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>
source to share