0

私は次のコードを持っています.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>
4

2 に答える 2

2

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

于 2013-01-22T11:10:24.080 に答える
2

ユーザー 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>
于 2013-01-22T11:10:33.477 に答える