jQuery .fadeOut然后等待，然后.fadeIn不起作用
[英]jQuery .fadeOut then wait, then .fadeIn doesn't work
问题描述
I'm trying to fade out a div, then fade in another div, and that works for me, the problem is I'm not able to delay it, so first div doesn't push the other div down... 
我正在尝试淡出一个div，然后淡入另一个div，这对我有用，问题是我无法延迟它，因此第一个div不会将另一个div下推...
This is my HTML (everything is inline): 这是我的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>
EDIT: I used this, and it worked. 编辑：我用这个，并且它起作用。
$(".vge-eksponering").fadeOut(1200);
$(".main").delay(1200).fadeIn(1200);
2 个解决方案
解决方案1
4 已采纳 2016-02-04 18:18:49
You have (at least) two choices: 您（至少）有两个选择：
If there's only one .vge-eksponering element, then use the completion callback fadeOut gives you: 如果只有一个.vge-eksponering元素，则使用完成回调fadeOut给您：
$(".vge-eksponering").fadeOut(1200, function() {
$(".main").fadeIn(1200);
});
Or just use delay with a value equivalent to the first fadeOut: 或者只使用与第一个fadeOut相等的值的delay ：
$(".vge-eksponering").fadeOut(1200);
$(".main").delay(1200).fadeIn(1200);
解决方案2
-1 2016-02-04 18:20:02
use setInterval 使用setInterval
setInterval(function() {
$(".main").fadeIn(1200);
}, 1200);
a tutorial on setInterval http://www.w3schools.com/jsref/met_win_setinterval.asp 关于setInterval的教程http://www.w3schools.com/jsref/met_win_setinterval.asp
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.