标题在滚动时淡入

Question

你好我试图让每个标题必须fadeIn当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来按字符串追加标题文本字符，每次将此temp作为内容传递到标题标记innerhtml中header.html(temp)

稍微改变了一下代码但是做了诀窍

            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);