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

单独为页面上的每个字符设置动画

1 个答案: