javascript - 如何在滚动条上逐个字母地加载文本

Question

大家好，当我滚动到 div 时，我试图加载我的 h2 文本一次，而 h2 的内容必须像打字机一样逐个字母地加载。我已经尝试过这种方式，但它不起作用。你们有什么想法吗？

$(window).scroll( function(){   
        $('.inner h2').each(function (i){          
            var header = $(this);
            var header_content = header.html();
            var content = new Array();
            content[i] = header_content;
            position = new Array();
            position[i] = $(this).position().top;
            console.log(content[i]+' pos '+position);     

            var bottom_of_window = $(window).scrollTop() + $(window).height();

            if( bottom_of_window > position[i] ){
                var arrayTitle = content[i].split('');
                var i = 0;              

                var interval = setInterval(function(){
                if (i > arrayTitle.length) 
                {
                  header.html(content[i]);        // wipe out the <span> tags
                  clearInterval(interval);
                } 
                else
                {
                  $('<span>')
                    .html(arrayTitle[i])
                    .appendTo(header)
                    .hide()
                    .fadeIn(50);                    
                    i++;      
                }
                }, 50);

            }            
        }); 

    });

Jsfiddle

Answer 1

这是我的看法:http://jsfiddle.net/Sladkoff/73TDB/

我将滚动事件处理程序放在每个函数中。这样，每个元素都有自己的“实例”变量和处理程序。它需要更多调整，但也许这会帮助您作为基础。

这对我来说意义不大:

我没有附加跨度，因为我从你的描述/代码中并没有真正理解你到底想用它实现什么。

如果这不是您想要的，那么至少我清理了一点 :)

// I would have just left a comment if I could.