javascript - 单独为页面上的每个字符制作动画

Question

目前，我有一个我蹒跚而行的大部分工作脚本。我分多个阶段进行此操作，以使其尽可能模块化。

//This grabs every element on page.
$('body').find('*').each(function(){
//This filters for text nodes only
$(this).contents().filter(function() { return this.nodeType == Node.TEXT_NODE;       }).each(function(){
    //Wraps each text node in a span.
    $(this).wrap("<span class='text'></span>")
});
})
//
$('.text').each(function(){
    //Splits each text node into a character array and wraps each char in a span.
    var test = $(this).text().split('');
        var curStr = '';
        for(var i = 0; i < test.length; i++){
           if(test[i] !=  " " || test[i] != ''){
            curStr = curStr + "<span class='char'>" +test[i] + "</span>";
           } else {
            curStr = curStr + test[i];
           }
        }
        $(this).html(curStr);
})

我的问题来自尝试随机设置元素的样式。我正在使用以下代码来执行此操作:

setInterval(function(){
    $($('.char')[Math.floor((Math.random()*$('.char').length)+1)]).each(function(){
        $(this).css('color', 'green');
        $(this).css('position', 'absolute');
        $(this).css('background-color', 'red');
        $(this).animate({
        top: $(window).height + 'px'
    }, 1000, 'swing', function(){$(this).remove()});
    })  
    }, 100)

问题是，它设法应用了颜色样式，但我的位置和动画似乎不起作用。

Answer 1

jQuery height()方法需要括号:

改变这个:

top: $(window).height + 'px'

对此:

top: $(window).height() + 'px'

Working Example