jQuery的显示隐藏无法正常工作

Question

我制作了一个淡入淡出的动画。

我有两个按钮$('.point li')显示两个不同的内容$("#"+classVal+" .table-cell")

但是，当我单击$('.point li') ，我希望从白色背景逐渐显示其内容。

但是当我单击另一个按钮并单击返回时，它的不透明度仍然存在。

每次单击按钮时，有没有办法显示不透明度为零的内容？

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

我找到了解决方案。

保留动画属性的原因是JQuery将其存储到变量中。

所以我在功能“停止”中更改了第二个参数

q.stop(true,false);

变为真实

q.stop(true,true);

意思是“跳到结束”

比它有效