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 回答