javascript - 堆叠打字效果和淡入效果？

Question

好吧，让我们看看这是否有意义。我仍然是一个新手，我试图保持简单，以便我理解该过程的每一步。

我想做的事情:目前我对文本 block 有打字机效果。一旦完成“打字”，我希望能够使当前文本淡出，并以相同的打字效果开始下一个文本 block 。我已经成功为其他页面编写了这个顺序淡入效果，但我不知道如何将两者结合起来。

JQuery 脚本:我在其他页面上使用的顺序 fadeIn 脚本如下所示:

    $('.wrapper').on('click', function () {
        var currentText = $('.active');
        var next = currentText.next('p');

        if (next.length > 0) {
            currentText.fadeOut(400).removeClass('active');
            next.delay(200).fadeIn(1100).addClass('active');
        }
    });
});

这也是我在打字机功能中使用的:

    var text = $(".typeText").text();

    $.each(text.split(''), function (i, letter) {
        setTimeout(function () {
            $('.typewriter').html($('.typewriter').html() + letter);
        }, 50 * i);
    });

但是，当我尝试将两者结合起来(例如 var text=$('.typeText .active' )时，它根本不起作用。每次点击时“清除” .typewriter div 并从“typeText”类重新获取文本内容的最佳方法是什么？

这是我用我的(非工作)代码设置的 JSFiddle(如果有帮助的话)。 http://jsfiddle.net/tuckyeah/tp42qqp9/7/

谢谢!!!

Answer 1

这是你想要的吗？

http://jsfiddle.net/OxyDesign/jd1Lwjyo/

JS

$(document).ready(function () {
    var typing = false;

    $('.wrapper').on('click', function () {
        typeIn();
    });

    function typeIn(){
        if(typing) return;
        var currentText = $('.typeText.active');
        var text = currentText.text();
        var next = currentText.next('.typeText');
        var typeWriter = $('.typewriter');

        typing = true;

        if (currentText.length > 0) {
            typeWriter.fadeOut(400,function(){
                var textSplit = text.split(''),
                    textLgth = textSplit.length;
                typeWriter.html('').show();
                $.each(textSplit, function (i, letter) {
                    setTimeout(function () {
                        typeWriter.html(typeWriter.html() + letter);
                        if(textLgth-1 === i) typing = false;
                    }, 500 * i);
                });

            });
            if(next.length) next.addClass('active');
            currentText.removeClass('active');
        }
    }

    typeIn();
});