Question

I have the following code, its makes the text explode onClick. But i need to have it explode after 5 second. Als it has to start automatically, without a click. Could someone tell me what i have to change?

<script type="text/javascript">
function fx(o) {
  var $o = $(o);

  $o.html($o.text().replace(/([\S])/g, "<span>$1</span>"));
  $o.css("position", "relative");
  $("span", $o).each(function(i) {
    var newTop = Math.floor(Math.random()*500)*((i%2)?1:-1);
    var newLeft = Math.floor(Math.random()*500)*((i%2)?1:-1);

    $(this).css({position: "relative",
      opacity: 1,
      fontSize: 50,
      top: 0,
      left: 0
    }).animate({
      opacity: 0,
      fontSize: 90,
      top: newTop,
      left:newLeft
    },1200);
  });
} </script>

<span onclick="fx(this)"><h1>Text Here</h1> </span>

Answer 1

Change your fx function to this:

function fx(o) {
  setTimeout (
    function () {
      var $o = $(o);

      $o.html($o.text().replace(/([\S])/g, "<span>$1</span>"));
      $o.css("position", "relative");
      $("span", $o).each(function(i) {
        var newTop = Math.floor(Math.random()*500)*((i%2)?1:-1);
        var newLeft = Math.floor(Math.random()*500)*((i%2)?1:-1);

        $(this).css({position: "relative",
          opacity: 1,
          fontSize: 50,
          top: 0,
          left: 0
        }).animate({
          opacity: 0,
          fontSize: 90,
          top: newTop,
          left:newLeft
        },1200);
      });
    },
    5000
  );
}

This delays the execution for 5 seconds (using the setTimeout function).

https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout