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

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)

T.J*_*der 5

您(至少)有两个选择:

如果只有一个.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)