Question

我有以下代码，它使文本在onClick上爆炸。但我需要让它在5秒后爆炸。它必须自动启动，无需点击。有人能告诉我我要改变什么吗？

<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

将您的fx功能更改为：

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

这会延迟执行5秒钟（使用setTimeout功能）。

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

Answer 2

user setTimeout（）

<script type="text/javascript">
    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);
    } </script>

Jquery onClick必须在5秒后自动启动

2 个答案: