Question

好的，让我们看看这是否合理。我仍然是一个新手，我试图保持这个简单，所以我理解这个过程的每一步。

我想做什么：目前我对一段文字有打字机效果。一旦完成＆＃39;输入＆＃39;，我希望能够使当前文本淡出，并且下一个文本块以相同的键入效果开始。我已经成功地为其他页面编写了这种顺序淡化效果，但我无法弄清楚如何将两者结合起来。

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'），它根本不起作用。什么是清除＆＃39;的最佳方法。 .typewriter div并从＆＃39; typeText＆＃39;重新获取文本内容。每次点击都会上课？

如果有帮助的话，我在这里设置了我的（非工作）代码的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();
});

用fadeIn效果堆叠打字效果？

1 个答案: