A dazzling animation has been created, fading in and out gracefully.
With two buttons at hand $('.point li') to reveal distinct contents $("#"+classVal+" .table-cell")
Nevertheless, upon clicking $('.point li'), I aspire for its content to gradually emerge from a white background.
Despite this wish, the opacity lingers when switching between buttons.
Is there a method to reset the content's opacity to zero each time the button is clicked?
var q = $('#intro .table-cell'); //initial content
var qIndex;
$(window).ready(function(){
$('.point li').click(function(){ //button click
$('.point li').removeClass('active');
var classVal = $(this).attr('class');
$(this).addClass('active');
q.stop(true,false);
$('.bg > div').css('display','none');
$('.bg > div .table-cell').css('display','none');
$('#'+classVal).css('display','block');
q = $("#"+classVal+" .table-cell");
qIndex = -1;
showNextQ();
});
});
function showNextQ() {
++qIndex;
q.eq(qIndex % q.length).show(2000).delay(1000).hide(2000, function(){
showNextQ();
});
}