I recently implemented fittext.js to make my text responsive on a website. I have 3 divs that are hidden until their corresponding link is clicked. Each div contains an h2 tag, but I'm facing an issue with the text not showing up when I use the fade-in effect. Can someone please help me resolve this?
Here is the HTML code:
<a id="one" href="#">one</a>
<a id="two" href="#">two</a>
<a id="three" href="#">three</a>
<div class="one content">
<h2>one</h2>
</div>
<div class="two content">
<h2>two</h2>
</div>
<div class="three content">
<h2>three</h2>
</div>
CSS styling for the content:
.content {
background: red;
width: 500px;
height: 100px;
margin: 10px;
}
.content {
display: none;
}
h2 {
font-size: 60px;
height: 100%;
}
JQuery function for handling the click event and fade animation:
$("a").click(function() {
var cls = $(this).attr('id')
$(".content").fadeOut(100);
$('.' + cls).delay(100).fadeIn(400);
return false;
});
jQuery("h2").fitText();
If you want to see the code in action, check out this jsFiddle link.