Kev*_*rom 0 html javascript jquery
我正在尝试淡出一个 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>Run Code Online (Sandbox Code Playgroud)
编辑:我用过这个,它奏效了。
$(".vge-eksponering").fadeOut(1200);
$(".main").delay(1200).fadeIn(1200);
Run Code Online (Sandbox Code Playgroud)
您(至少)有两个选择:
如果只有一个.vge-eksponering元素,则使用完成回调fadeOut为您提供:
$(".vge-eksponering").fadeOut(1200, function() {
$(".main").fadeIn(1200);
});
Run Code Online (Sandbox Code Playgroud)
或者只使用delay与第一个淡出等效的值:
$(".vge-eksponering").fadeOut(1200);
$(".main").delay(1200).fadeIn(1200);
Run Code Online (Sandbox Code Playgroud)