寻找一种方法，使这种JS效果适用于我的页面上的所有文本，加载

Question

我发现了这个小提琴(不是我)，并试图找出如何改变它，而不是当文本被点击时发生的效果，效果发生在页面上的所有文本，当页面加载。谢谢!

下面是小提琴的代码:

function fx(o)
{
  var $o=$(o);
      $o.html($o.text().replace(/([S])/g,'<span>$1</span>'));
      $o.css('position','relative');
      $('span',$o).stop().css({position:'relative',
                               opacity:0,
                               fontSize:84,
                               top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
                               left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
                       }).animate({opacity:1,fontSize:12,top:0,left:0},1000);
}

然后页面上有一个div:

<div style="padding:200px;"><span onlick="fx(this)">click here</span></div>

Answer 1

这就是加载时的问题:

JSFiddle

我是怎么得到这个工作的?

1 -给带有文本的span一个id，在本例中是xplod

2 -在$(function() { })上调用fx("#xplod")，与$(document).ready()相同