javascript - 标题在滚动时淡入

Question

你好，当 window.scrollTop 大于标题位置时，我试图让每个标题都必须淡入，但我的代码不起作用，我得到了奇怪的 html 而不是我的标题。有什么想法吗？

$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.inner h2').each( function(i){

        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it it */
        if( bottom_of_window > bottom_of_object ){

            var header = $(this);           
            var title = header.html();
            header.html('');        
            var arrayTitle = title.split('');
            var i = 0;              

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

        }            
    }); 

});

http://jsfiddle.net/e5qaD/2005/

Answer 1

Solved Check Demo 1 和 Demo 2

我做了什么 更改了 span 的使用，而不是使用 var temp 通过 char 附加标题文本字符，每次将此 temp 作为内容传递到标题标签 innerhtml 作为 header。 html(临时)

稍微更改了代码，但确实有效

            var temp='';
            var interval = setInterval(function(){
            if (i > arrayTitle.length) 
            {
              header.html(title);        // wipe out the <span> tags
              clearInterval(interval);
            } 
            else
            { 

             if (i < arrayTitle.length) 
            {

                temp =temp+arrayTitle[i];
            } 


              //  alert(temp);
                header.html(temp).fadeIn(1000);

                 i++; 
            }
            }, 50);