0

何が間違っているのかわかりませんが、これらの div は正しくフェードインしますが、フェードアウトしません!

それらは mp3 に合わせて構造化されたタイムライン上にあることを意図しているため、遅延時間が長くなります!

<!DOCTYPE html>
<html>
<head>
  <style>
div { position: absolute; width: 60px; height: 60px; float: left; display:none; }
.first { background-color: #3f3; left: 0;}
.second { background-color: #33f; left: 80px;}
.third { background-color: #3f3; left: 120px;}
.fourth { background-color: #33f; left: 300px;}
.fifth { background-color: #3f3; left: 400;}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>
</head>
<body>

<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<div class="fifth"></div>

<script>
    $("button").click(function() {
      $("div.first").delay(15060).show("puff", {}, 300).delay(116010).fadeOut(300);
      $("div.second").delay(40230).show("puff", {},300).delay(28990).fadeOut(300);
      $("div.third").delay(46180).show("puff", {},300).delay(27880).fadeOut(300);
      $("div.fourth").delay(71070).show("puff", {},300).delay(42050).fadeOut(300);
      $("div.fifth").delay(110080).show("puff", {},300).delay(17050).fadeOut(300);
    });
</script>

</body>
</html>

数学私はあなたが提案したことを試しましたが、それは完全に壊れました。Jqueryに関する私の限られた知識でごちゃごちゃして申し訳ありません

スクリプトが変更されましたが、まだ機能していませんか?

<script>
$("button").click(function() {
  $("div.first").delay(200).show(300, "puff", function() {
 $(this).delay(116010).fadeOut(300);  });
   $("div.first").delay(40230).show(300, "puff", function() {
 $(this).delay(28990).fadeOut(300);  });
   $("div.first").delay(46180).show(300, "puff", function() {
 $(this).delay(27880).fadeOut(300);  });
   $("div.first").delay(71070).show(300, "puff", function() {
 $(this).delay(42050).fadeOut(300);  });
   $("div.first").delay(110080).show(300, "puff", function() {
 $(this).delay(17050).fadeOut(300);  });
});
</script>

veeTrainに感謝します。特定の時間に来て、特定の時間に出発する必要があることを除いて、ほとんど機能します。これを行うためにコードを変更した方法は次のとおりです! よろしくお願いします。

<!DOCTYPE html>
<html>
<head>
  <style>
div { position: absolute; width: 60px; height: 60px; float: left; display:none; }
.first { background-color: #3f3; left: 0;}
.second { background-color: #33f; left: 80px;}
.third { background-color: #3f3; left: 120px;}
.fourth { background-color: #33f; left: 300px;}
.fifth { background-color: #3f3; left: 400;}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>
</head>
<body>

<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<div class="fifth"></div>

<script>
    $("button").click(function() {
        console.log("hi");
      $("div.first").delay(15060).show(300);
      $("div.second").delay(40230).show(300);
      $("div.third").delay(46180).show(300);
      $("div.fourth").delay(71070).show(300);
      $("div.fifth").delay(110080).show(300);
        setTimeout(function() {
            $("div.first").fadeOut(300);
        }, 116010);
        setTimeout(function() {
            $("div.second").fadeOut(300);
        }, 28990);
        setTimeout(function() {
            $("div.third").fadeOut(300);
        }, 27880);
        setTimeout(function() {
            $("div.fourth").fadeOut(300);
        }, 42050);
        setTimeout(function() {
            $("div.fifth").fadeOut(300);
        }, 17050);
    });
</script>
</body>
</html>
4

2 に答える 2

2

fadeout次のように、 をコールバックとして起動する必要があります。

  $("div.first").delay(15060).show(300, "puff", function() {
     $(this).delay(116010).fadeOut(300);
  });
于 2012-04-17T14:23:00.383 に答える
0

次のように setTimeout 操作を実行することもできます。

$("div.first").delay(15060).show(300, "puff");
setTimeout(function() {
    $("div.first").fadeOut(300);
}, 116010);

例を示すjsfiddleを次に示します。（注、「パフ」操作は含まれません）

このjsfiddleは、タイミングが何であるかを示しています。

私があなたの意図を理解している場合は、最初に表示されてから x 秒後に要素を非表示にするためにキューに入れることをお勧めします。これらの例はそれを実行しませんが、初期遅延の時間を追加することで、自分で計算を行い、必要なときに要素を正確に非表示にできるはずです。

例えば：fade in after 5 seconds; fade out after 5 seconds

なる可能性がありますfade in after 5 seconds and fade out after *10* seconds

于 2012-04-17T14:37:28.757 に答える