jQuery .fadeOut然后等待，然后.fadeIn不起作用

Question

我正在尝试淡出一个div，然后淡入另一个div，这对我有用，问题是我无法延迟它，因此第一个div不会将另一个div下推...

这是我的HTML（所有内容都是内联的）：

 <!doctype html> <html> <head> <title>JavaScript popup</title> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="main.js" type="text/javascript"></script> </head> <script type="text/javascript"> $(document).ready(function(){ $(".main").hide(); }); $("#continue-button").click(function(){ $(".vge-eksponering").hide(); $(".main").show(); }); </script> <body style="background-color:lightgrey;"> <div class="vge-eksponering" style="text-align:center;"> <h1>Tjek VGEs hjemmeside ud på: <br> <a href="http://www.vge.dk" target="_blank">www.vge.dk</a></h1> <button id="continue-button" style="font-size:2em;">Fortsæt til VGE News</button> </div> <script> $("#continue-button").click(function(){ $(".vge-eksponering").fadeOut(1200); $(".main").fadeIn(1200); }); </script> <div class="main" style="background-color:lightblue;"> <h1>JavaScript popup</h1> <p>Hopefully this will work soon...</p> </div> </body> </html>

编辑：我用这个，并且它起作用。

$(".vge-eksponering").fadeOut(1200);
$(".main").delay(1200).fadeIn(1200);

Answer 1

您（至少）有两个选择：

如果只有一个.vge-eksponering元素，则使用完成回调fadeOut给您：

$(".vge-eksponering").fadeOut(1200, function() {
    $(".main").fadeIn(1200);
});

或者只使用与第一个fadeOut相等的值的delay ：

$(".vge-eksponering").fadeOut(1200);
$(".main").delay(1200).fadeIn(1200);

Answer 2

使用setInterval

setInterval(function() {
  $(".main").fadeIn(1200);
}, 1200);

关于setInterval的教程http://www.w3schools.com/jsref/met_win_setinterval.asp

jQuery .fadeOut然后等待，然后.fadeIn不起作用

问题描述

2 个解决方案

解决方案1
4 已采纳 2016-02-04 18:18:49

解决方案2
-1 2016-02-04 18:20:02

jQuery .fadeOut然后等待，然后.fadeIn不起作用

问题描述

2 个解决方案

解决方案1 4 已采纳 2016-02-04 18:18:49

解决方案2 -1 2016-02-04 18:20:02

解决方案1
4 已采纳 2016-02-04 18:18:49

解决方案2
-1 2016-02-04 18:20:02