Question

不确定我做错了但是这些div正确淡入但是没有fadeOut！

他们打算使用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>

Mathletics我尝试了你的建议，但它完全打破了，任何想法我可能做错了什么？抱歉，我对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>

Answer 1

您应该将fadeout作为回调触发，如下所示：

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

Answer 2

你也可以像这样执行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

jquery .fadeIn .delay .fadeOut - 不淡出

2 个答案: