jquery show hide not working properly

Question

I've made an animation which fades in and out.

I have two buttons $('.point li') to show two different contents $("#"+classVal+" .table-cell")

However, when I click $('.point li') , I'd like to gradually show its content from white background.

But its opacity remained when I click another button and click back.

Is there a way to show the content from zero opacity every time I click the button?

var q = $('#intro .table-cell'); //this is a first content to show
var qIndex;
$(window).ready(function(){
     $('.point li').click(function(){ //click a button
        $('.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();
    });
}

Answer 1

I found a solution.

The reason why the animation's attributes remained is that JQuery store it to a variable.

So I change the second parameter in a function "stop"

q.stop(true,false);

to True

q.stop(true,true);

which means "jump to end"

Than it works