Java jquery.fadeIn.delay.fadeOut-不淡出_Java_Jquery_Delay_Fadein_Fadeout

Java jquery.fadeIn.delay.fadeOut-不淡出

java jquery

Java jquery.fadeIn.delay.fadeOut-不淡出,java,jquery,delay,fadein,fadeout,Java,Jquery,Delay,Fadein,Fadeout,不确定我做错了什么，但这些div正确地淡入，但不会淡出他们的目的是在结构化的时间轴与mp3，因此很长的延迟时间 <!DOCTYPE html> <html> <head> <style> div { position: absolute; width: 60px; height: 60px; float: left; display:none; } .first { background-color: #3f3; left: 0;} .sec

不确定我做错了什么，但这些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>


div{位置：绝对；宽度：60px；高度：60px；浮动：左；显示：无；}
.first{背景色：#3f3；左：0；}
.second{背景色：#33f；左：80px；}
.third{背景色：#3f3；左：120px；}
.4th{背景色：#33f；左：300px；}
.fifth{背景色：3f3；左：400；}
跑
$（“按钮”）。单击（函数（）{
$（“div.first”）.delay（15060）。show（puff），{}，300）。delay（116010）。fadeOut（300）；
延迟（40230）。显示（喘息），300。延迟（28990）。淡出（300）；
延迟（46180）。显示（喘息），300。延迟（27880）。淡出（300）；
延迟（71070）。显示（喘息），300。延迟（42050）。淡出（300）；
$（“第五分区”）.delay（110080）。show（“puff”，300）。delay（17050）。fadeOut（300）；
});

数学我尝试了你的建议，但它完全打破了它，你知道我可能做错了什么吗？很抱歉，我对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>


$（“按钮”）。单击（函数（）{
$（“div.first”）.delay（200）.show（300，“puff”，function（）{
$（此）.delay（116010）.fadeOut（300）；}）；
$（“div.first”）.delay（40230）.show（300，“puff”，function（）{
延迟（28990.fadeOut（300）；}）；
$（“div.first”）.delay（46180）.show（300，“puff”，function（）{
延迟（27880.fadeOut（300）；}）；
$（“div.first”）.delay（71070）.show（300，“puff”，function（）{
$（此）.delay（42050）.fadeOut（300）；}）；
$（“div.first”）.delay（110080）.show（300，“puff”，function（）{
$（此）.delay（17050）.fadeOut（300）；}）；
});

谢谢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>


div{位置：绝对；宽度：60px；高度：60px；浮动：左；显示：无；}
.first{背景色：#3f3；左：0；}
.second{背景色：#33f；左：80px；}
.third{背景色：#3f3；左：120px；}
.4th{背景色：#33f；左：300px；}
.fifth{背景色：3f3；左：400；}
跑
$（“按钮”）。单击（函数（）{
控制台日志（“hi”）；
$（“第一分区”）。延迟（15060）。显示（300）；
延迟（40230）。显示（300）；
$（“第三分区”）。延迟（46180）。显示（300）；
$（“第四分区”）。延迟（71070）。显示（300）；
$（“第五分区”）。延迟（110080）。显示（300）；
setTimeout（函数（）{
美元（“第一分区”）。淡出（300）；
}, 116010);
setTimeout（函数（）{
$（“第二分区”）。淡出（300）；
}, 28990);
setTimeout（函数（）{
美元（“第三分部”）。淡出（300）；
}, 27880);
setTimeout（函数（）{
$（“第四分部”）。淡出（300）；
}, 42050);
setTimeout（函数（）{
$（“第五分区”）。淡出（300）；
}, 17050);
});

您应该启动

淡出

作为回调，如下所示：

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

您还可以执行如下设置超时操作：

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

下面是一个示例。（注意，不包括您的“吹气”操作）

这显示了你的时间安排

如果我理解您的意图，您会希望元素在第一次显示后的x秒内被排队隐藏。这些示例不会执行此操作，但您应该能够自己进行计算，并通过添加初始延迟的时间，在需要时完全隐藏元素

例如：

5秒后淡入；5秒后淡出

可能会在5秒后淡入，*10*秒后淡出

它们会淡入而不会淡出吗？你在哪些浏览器上测试过这个？当他们淡入时，他们只是停留在你的屏幕上永远不会淡出吗？我不知道什么。显示（“puff”{}，300）意味着-？这是最新版本的Chrome，他们淡入但从不淡出。。。它一直有效，直到我在之前添加了延迟("泡芙…如果我的解决方案不适合你，一定要通过评论让我知道。尝试过但破坏了它，我实现了错误吗？见上图。谢谢！嘿，它几乎可以工作。请看我在底部所做的编辑，上图！哦，我应该说对我不起作用的是，第一个出现了，然后没有消失，下一个出现在右边时间过了，但马上就消失了。@BenVickers；关于它们马上消失的观点很好。这就是我在“回答”末尾所说的观点；我更新了它，提到你需要手动决定增加超时，不管第一次延迟显示是什么。例如，显示延迟5秒，隐藏延迟5秒延迟5，设置超时10。这可能不是理想的解决方案，但我认为它是可行的。为什么你的超时这么长？最新迭代：哇，好的，这很好，谢谢！抱歉误解，我注意到我的超时计时有点错误，但我认为这是我的错误，因为我根据w设置了超时它在屏幕上的时间长度，并减去时间。the:$（“div.first”）.fadeOut（300）；}，116010）；只适用于它显示的时间，对吗？这段代码之所以如此荒谬、如此漫长，是因为它是为了一件艺术品，不同的视频会随着音乐及时弹出；啊!！听起来很酷；我希望你能发布一个最终项目的链接。超时以毫秒为单位（1000=1秒）。从这个简单的例子开始，了解时间安排，然后从这里开始。这将使事情变得更简单：